我想将导航器放在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>
答案 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的位置。
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具有百分比宽度
,也是如此
* {
-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 +