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

时间:2015-03-18 16:29:01

标签: html css

我想将导航器放在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>

3 个答案:

答案 0 :(得分:0)

您需要将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>

答案 1 :(得分:0)

您是否在寻找类似的内容: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>*

答案 2 :(得分:0)

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

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

&#13;
&#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;
&#13;
&#13;

即使div具有百分比宽度

,也是如此

&#13;
&#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;
&#13;
&#13;

注意calc支持是IE9 +