CSS 绝对定位及其父元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11862330/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute positioning and its parent element
提问by Brett
I've always heard that when you use absolute positioning that the element you want to act as its parent needs to have a positionof relative.
我一直听说，当您使用绝对定位时，您想要充当其父元素的元素需要有一个positionof relative。
I was trying to build a CSS dropdown menu and I was struggling to get the dropdown menu items stretch beyond the width of the main menu item when I had its parent element I wanted it to use set as relative; the text in the drop down menu items would just wrap.
我试图构建一个 CSS 下拉菜单，当我希望它使用 set as 的父元素时，我正在努力使下拉菜单项超出主菜单项的宽度relative；下拉菜单项中的文本会自动换行。
So I looked around at other example menus to see how they did it and one I found wasn't even using any parent elements with a positionof relativeeven though they were using absolute positioning like I was.
所以我环顾了其他示例菜单，看看它们是如何做到的，我发现一个菜单甚至没有使用任何带有 aposition的父元素，relative即使它们像我一样使用绝对定位。
That example is here: http://purecssmenu.com/
这个例子在这里：http: //purecssmenu.com/
So I tried removing my relativepositioning and bingo - my problem went away. However now I am using absolute positioning with none of it's parents using relativepositioning, they are all set to static.
所以我尝试删除我的relative定位和宾果游戏 - 我的问题消失了。但是现在我使用的是绝对定位，而它的父母都没有使用relative定位，它们都设置为static.
So I'm wondering how that makes sense - with no relativeparents wouldn't it fall back to the browser window?
所以我想知道这有什么意义 - 没有relative父母会不会回到浏览器窗口？
If need be, here is my HTML:
如果需要，这是我的 HTML：
<div class="navWrapper">
<div class="left"></div>
<div class="nav">
<ul>
<li class="home"><a href="/">Home</a></li>
<li class="spacer"></li>
<li class="about"><a href="about_us/">About Us</a></li>
<li class="spacer"></li>
<li class="trademark"><a href="freetrademarksearch/">Free Trademark Search</a></li>
<li class="spacer"></li>
<li class="services">
<a href="services/">Services</a>
<ul class="sub">
<li><a href="">Trademark Search</a></li>
<li><a href="">Prepare & File Trademark</a></li>
<li><a href="">Trademark Infringement</a></li>
</ul>
</li>
<li class="spacer"></li>
<li class="testimonials"><a href="testimonials/">Testimonials</a></li>
<li class="spacer"></li>
<li class="more"><a href="javascript:void(0);">More Information</a></li>
<li class="spacer"></li>
<li class="contact"><a href="contact-us/">Contact Us</a></li>
</ul>
<div class="contentClear"></div>
</div>
<!-- Nav Ends -->
<div class="right"></div>
</div>
<!-- Nav Wrapper Ends -->
CSS:
CSS：
#header .navWrapper {
width: 1004px;
}
#header .navWrapper .left {
float: left;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-left-bg.png') left top no-repeat;
}
#header .navWrapper .nav {
float: left;
width: 994px;
border-top: 1px solid #e0d0b4;
border-left: 1px solid #e0d0b4;
border-right: 1px solid #e0d0b4;
border-bottom: 1px solid #e8dcc8;
background: url('../images/nav-button-bg.png') left top repeat-x;
}
#header .navWrapper .nav ul {
margin: 0 1px;
display: block;
}
#header .navWrapper .nav li {
float: left;
display: block;
height: 45px;
font-family: OpenSansBold, Arial;
font-size: 16px;
line-height: 2.9;
text-align: center;
color: #646464;
}
#header .navWrapper .nav li.spacer {
width: 2px;
min-width: 2px;
height: 45px;
min-height: 45px;
background: url('../images/nav-button-spacer-bg.png') left top no-repeat;
}
#header .navWrapper .nav li a,
#header .navWrapper .nav li a:visited
{
display: block;
height: 45px;
padding: 0 20px;
color: #646464;
text-decoration: none;
}
#header .navWrapper .nav li a:hover,
#header .navWrapper .nav li a:active,
#header .navWrapper .nav li a:focus
{
color: #fff;
background: url('../images/nav-button-bg.png') left bottom repeat-x;
}
#header .navWrapper .nav li.home {
max-width: 86px;
text-indent: -1px;
}
#header .navWrapper .nav li ul.sub {
position: absolute;
}
#header .navWrapper .nav li ul.sub li {
float: none;
display: block;
font-family: OpenSansSemibold, Arial;
font-size: 14px;
line-height: 2.3;
height: auto;
text-align: center;
background-color: #f4771d;
color: #fff;
}
#header .navWrapper .nav li ul.sub li a,
#header .navWrapper .nav li ul.sub li a
{
color: #fff;
height: auto;
}
#header .navWrapper .nav li ul.sub li a:hover,
#header .navWrapper .nav li ul.sub li a:focus,
#header .navWrapper .nav li ul.sub li a:active
{
background: #d66627;
}
#header .navWrapper .right {
float: right;
width: 4px;
min-width: 4px;
height: 47px;
min-height: 47px;
background: url('../images/nav-right-bg.png') left top no-repeat;
}
回答by Faust
It falls back to the nearest ancestorelement that has position defined as relative, absolute, or fixed-- not just relative, but any value other than static(the default).
它回落到最近的祖先是有定义为定位元素relative，absolute或fixed-不只是relative，但以外的值static（默认值）。
Generally, you'd want to position the item absolutely according to a grid established by its parent. However, sometimes it makes sense to have it positioned to a grid established by a higher up element.
通常，您希望根据其父项建立的网格绝对定位该项目。但是，有时将其定位到由更高级别元素建立的网格是有意义的。
For example:
例如：
HTML
HTML
<body>
<div id="div1">
<div id="div2-A">[some content]</div>
<div id="div2-B">
<div id="div3">[more content]</div>
</div>
</div>
</div>
CSS
CSS
#div1{
width:1024px;margin:auto;
position:relative
}
#div3{
position:absolute;
bottom:0px; left:0px;
}
In this case, div3 will be positioned all the way to the left & bottom of div1 -- its grandfather -- because its immediate parent (div2) has the default position:static, and so does not establish as an absolute positioning context/grid for its children. But div3 will not(necessarily) go all the way to the left of the viewport or the page body because the next higher up element (div1) has position defined as relative.
在这种情况下，div3 将一直定位到 div1（其祖父）的左侧和底部，因为它的直接父级 (div2) 具有默认值position:static，因此不会为其子级建立绝对定位上下文/网格. 但是 div3不会（必然）一直到视口或页面正文的左侧，因为下一个更高的元素 (div1) 的位置定义为相对。
UPDATE
In the case you provided (http://purecssmenu.com/), the position:relative declaration is being applied on the :hover pseudo-class, so you won't see it immediately in the styles listed for Google Developer Tools or Firebug.
更新
在您提供 (http://purecssmenu.com/) 的情况下， position:relative 声明应用于 :hover 伪类，因此您不会立即在为 Google Developer Tools 或萤火虫。
You can inspect this in Google developer tools by inspecting the parent element, then in the right-hand side of the "Styles" panel, click the "Toggle Element State" button, (looks like a box with dotted border and an arrow pointing in it), then check the box next to ":hover". I'm sure Firebug has something similar.
您可以通过检查父元素在 Google 开发人员工具中检查这一点，然后在“样式”面板的右侧，单击“切换元素状态”按钮，（看起来像一个带有虚线边框和指向它），然后选中“:hover”旁边的框。我确定 Firebug 有类似的东西。
You'll see this declaration added to the list:
您会看到此声明已添加到列表中：
ul.cssMenu li:hover { position: relative; }
This works because when you're not hovering on the parent <li>, the sub-menu <ul>is hidden with display:none, so it doesn't matter where it's positioned.
这是有效的，因为当您没有将<li>鼠标悬停在 parent 上时，子菜单<ul>被隐藏display:none，因此它的位置无关紧要。
回答by Ricky Boyce
Another note on the nearest ancestorwhen an element is being positioned.
关于定位元素时最近祖先的另一个注意事项。
Three years later after the OP, CSS3 properties like transform are more widely being used, which implicitly creates a new containing block, forcing the element to have position: relative/absolute;
OP 三年后，像 transform 这样的 CSS3 属性被更广泛地使用，它隐式地创建了一个新的包含块，迫使元素具有 position: relative/absolute;
So to make sure intermediaryparent elements have no effect in the positioning of a child element, you need check it has position: staticand no transformsset.
因此，要确保中介父元素有一个子元素的定位没有影响，你需要检查它有position: static没有transforms集。
Example
例子
<div id="one">
<div id="two">
<div id="three"></div>
</div>
</div>
#one {
position: relative;
}
#two {
position: static;
transform: none;
}
#three {
position:absolute;
}
