问题描述
我发现当我定位一个固定的元素时,父元素是否相对定位并不重要,它会相对于窗口定位?
#wrapper {宽度:300px;背景:橙色;边距:0 自动;位置:相对;}#回馈 {位置:固定;右:0;顶部:120px;}
...<a id="feedback" href="#">反馈</a>
让我为这两个可能的问题提供答案.请注意,您现有的标题(和原始帖子)提出的问题与您在编辑和后续评论中寻求的不同.
<小时>要相对于父元素固定"定位元素,您需要在子元素上position:absolute
,以及除默认或静态之外的任何位置模式在您的父元素上.
例如:
#parentDiv { position:relative;}#childDiv { 位置:绝对;左:50px;顶部:20px;}
这将使 childDiv
元素相对于 parentDiv 的位置向左 50 像素,向下 20 像素.
要将元素相对于窗口固定"定位,您需要position:fixed
,并且可以使用top:
, left:
、right:
和 bottom:
到您认为合适的位置.
例如:
#yourDiv { position:fixed;底部:40px;右:40px;}
这将使 yourDiv
相对于 Web 浏览器窗口固定,距底部边缘 40 像素,距右边缘 40 像素.
I find that when I position an element fixed, it doesn't matter if the parent is positioned relative or not, it will position fixed, relative to the window?
#wrapper {
width: 300px;
background: orange;
margin: 0 auto;
position: relative;
}
#feedback {
position: fixed;
right: 0;
top: 120px;
}
<div id="wrapper">
...
<a id="feedback" href="#">Feedback</a>
</div>
Let me provide answers to both possible questions. Note that your existing title (and original post) ask a question different than what you seek in your edit and subsequent comment.
To position an element "fixed" relative to a parent element, you want position:absolute
on the child element, and any position mode other than the default or static on your parent element.
For example:
#parentDiv { position:relative; }
#childDiv { position:absolute; left:50px; top:20px; }
This will position childDiv
element 50 pixels left and 20 pixels down relative to parentDiv's position.
To position an element "fixed" relative to the window, you want position:fixed
, and can use top:
, left:
, right:
, and bottom:
to position as you see fit.
For example:
#yourDiv { position:fixed; bottom:40px; right:40px; }
This will position yourDiv
fixed relative to the web browser window, 40 pixels from the bottom edge and 40 pixels from the right edge.
这篇关于我可以定位相对于父元素固定的元素吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,WP2