html - 导航位置 :fixed in right of the div

Question

我想将导航放置在 div 的右侧，点缀有 position: fixed。如果您使用 right: 0 但来自 div。我能怎么做？这是代码:

<div style="width:800px; height:2000px; margin:0 auto; border:2px dotted #000;">
  <nav style="position:fixed;">
    <ul>
       <li>voce1</li>
       <li>voce2</li>
       <li>voce3</li>
       <li>voce4</li>
   </ul>
  </nav>
</div>

Answer 1

位置固定是相对于视口(viewport)窗口...所以固定的 div 是不可能相对于另一个元素定位的。

也就是说，如果“父”div 的宽度已知，则可以使用 calc 来确定固定 div 的位置。

div {
  width: 400px;
  height: 2000px;
  margin: 0 auto;
  border: 2px dotted #000;
}
nav {
  border: 1px solid red;
  position: fixed;
  right: calc(50% - 200px);
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
}

<div>
  <nav>
    <ul>
      <li>voce1</li>
      <li>voce2</li>
      <li>voce3</li>
      <li>voce4</li>
    </ul>
  </nav>
</div>

即使 div 具有百分比宽度也是如此

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
div {
  width: 80%;
  height: 2000px;
  margin: 0 auto;
  border: 2px dotted #000;
}
nav {
  border: 1px solid red;
  position: fixed;
  right: calc(50% - 40%);
}
ul {
  list-style-type: none;
}
li {
  display: inline-block;
  padding: 1rem;
}

<div style="">
  <nav style="">
    <ul>
      <li>voce1</li>
      <li>voce2</li>
      <li>voce3</li>
      <li>voce4</li>
    </ul>
  </nav>
</div>

注意 calc 支持 IE9+