Question

我想将导航器放在div的右侧，点缀着位置：fixed。如果你使用右边：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

您需要将div置于相对位置，将导航器置于绝对位置+右侧0

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

Answer 2

您是否在寻找类似的内容：EXAMPLE

如果是这样，您的代码现在将是：

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

Answer 3

固定的位置是相对于视口窗口...因此不可能将固定的div相对于另一个元素定位。

那说，如果父母＆＃39; div具有已知宽度，可以与calc一起使用来确定固定div的位置。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

即使div具有百分比宽度

，也是如此

＆＃13;

* {
  -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;
}

＆＃13;

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

＆＃13;

注意calc支持是IE9 +

导航位置：固定在div的右侧

3 个答案: