相对于也响应的容器的绝对位置

Question

我在将元素放置到其父级时遇到一些问题，同时保持其响应性。让我们说我的响应<section>是屏幕宽度的66％并居中。我有一个<nav>，应该始终坚持到它的一边。但是，一旦屏幕尺寸小于992像素，<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; }
}