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

Question

我在将元素绝对定位到其父元素同时保持其响应时遇到了一些问题。可以说我有一个响应式 <section> 占屏幕宽度的 66% 并且居中。我有一个 <nav> 应该一直贴在它的侧面。然而，一旦您的屏幕尺寸小于 992px，<section> 的宽度现在为 100%。本应始终位于侧面的 <nav> 现在应该固定在 <section>...

的顶部

所有这些我都可以做到并使其正常工作...直到您不断缩小屏幕尺寸，使 <nav> 中的 <li> 必须堆叠在顶部彼此的。发生这种情况时，<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; }
}

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

Absolute position relative to a container that is also responsive

html

css

responsive-design

HTML

CSS