我可以将元素定位为相对于父对象吗？ [英] Can I position an element fixed relative to parent?

问题描述

我发现当我将元素定位在固定位置时，如果父元素位于相对位置， p> CSS

  #wrapper {width：300px;背景：橙色margin：0 auto;位置：相对; } 
 #feedback {position：fixed; right：0; top：120px; } 
  

HTML

 < div id =wrapper> 
 ... 
< a id =feedbackhref =＃>反馈< / a> 
< / div> 
  

http：// jsbin .com / ibesa3

解决方案

让我提供两个可能的问题的答案。请注意，您现有的标题（和原始信息）提出的问题与您在修改和后续评论中所寻求的不同。

---

要相对于父元素定位元素fixed，您需要在子元素上使用 position：absolute ，并且除了您父元素的默认值或静态值。

例如：

  #parentDiv {position：relative; } 
 #childDiv {position：absolute; left：50px; top：20px; } 
  

这将定位 childDiv 元素50像素

---

相对于窗口定位元素为固定 ，您希望 position：fixed ，并且可以使用 top：， ：， right：和 bottom：

例如：

  #yourDiv {position：fixed; bottom：40px; right：40px; } 
  

这将会将 yourDiv 网络浏览器窗口，从底部边缘起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?

CSS

#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }

HTML

<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

解决方案

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.

这篇关于我可以将元素定位为相对于父对象吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！