相对于同样响应的容器的绝对位置

Question

我有一些困难，定位一个元素的父母绝对，同时保持它的反应。让我们简单地说，我有一个响应<section>，是66%的屏幕宽度和居中。我有一个<nav>，它应该一直卡在它的一边。但是，一旦屏幕大小小于992 of，<section>的宽度现在是100%。<nav>应该一直在一边，现在应该被粘在<section>的顶部.

所有这些我都能做到让它正常运作。直到你不断缩小屏幕的大小，<li>在<nav>中的位置必须相互叠在一起。当这种情况发生时，<nav>现在正在覆盖<section>的一部分，而不是与之保持一致。

我做了一个codepen with an example of this。我给元素背景颜色，这样就更容易看到发生了什么。如有任何帮助或建议，将不胜感激。有什么方法可以不使用多个媒体查询来控制它吗？

HTML

<section class="col-8-12 offset-2">
  <nav class="to-do-list">
    <ul>
      <li>Add Some1 Info</li>
      <li>Add Some2 Info</li>
      <li>Add Some3 Info</li>
      <li>Add Some4 Info</li>
    </ul>
  </nav>
  <div>
    <h1>Some Title Here</h1>
    <p>Some1 Stuff Here</p>
    <p>Some2 Stuff Here</p>
    <p>Some3 Stuff Here</p>
    <p>Some4 Stuff Here</p>
  </div>
</section>

CSS

html              { background-color: #1394cb; }
.col-8-12         { width: 66.66666667%; }
.offset-2         { margin-left: 16.66666667%; }
section           { float: left; margin-top: 250px; background-color: #0d2c41; position: relative; }
nav.to-do-list    { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p     { color: #FFF; padding-left: 15px; }
ul>li             { list-style: none; margin-right: 30px; }

@media only screen and (max-width: 992px){
  .col-8-12       { width: 100%; }
  .offset-2       { margin-left: 0; }
  nav.to-do-list  { left: 0; top: -50px; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
  ul>li           { display: inline-block; }
}

Answer 1

只需使用相对定位在较低的分辨率。使用绝对会破坏您的布局，因为元素被从常规流中移除，因此不会影响其周围的其他元素。

除其他小改动外：

html { background-color: #1394cb; }
.col-8-12 { width: 66.66666667%; }
.offset-2 { margin-left: 16.66666667%; }
section { float: left; margin-top: 250px; ; position: relative; }
section > div {background: #0d2c41; padding: 10px 0;}
nav.to-do-list { position: absolute; left: -177px; top: 0; background-color: #FFF; max-width: 180px; }
div>h1, div>p { color: #FFF; padding-left: 15px; }

ul>li { list-style: none; margin-right: 30px; }

@media only screen and (max-width: 992px){
  .col-8-12 { width: 100%; }
  .offset-2 { margin-left: 0; }
  nav.to-do-list { position: relative; left: 0; min-height: 50px; display: inline-block; max-width: none; width: 95%; margin-left: 2.5%; }
  ul>li { display: inline-block; }
}