绝对定位及其父元素 [英] Absolute positioning and its parent element
问题描述
我一直听说当你使用绝对定位时，你想要作为其父元素的元素需要具有相对的。位置
我正在尝试构建一个CSS下拉菜单，我很难得到下拉菜单项目超出主菜单的宽度item我有它的父元素我想它使用设置为 relative ;
因此，我在其他示例菜单中查看它们是如何做到的，一个我发现甚至没有使用任何具有位置的相对的父元素，即使他们像我一样使用绝对定位。
所以我试图删除我的相对定位和宾果 - 我的问题消失了。但是现在我使用绝对定位，而不是它的父母使用相对定位，它们都设置为 static 。 / p>
所以我想知道如何有意义 - 没有亲戚父母不会回到浏览器
如果需要， < div class =navWrapper>
< div class =left>< / div>
< div class =nav>
< ul>
< li class =home>< a href =/>首页< / a>< / li>
< li class =spacer>< / li>
< li class =about>< a href =about_us />关于我们< / a>< / li>
< li class =spacer>< / li>
< li class =trademark>< a href =freetrademarksearch />免费商标搜索< / a>< / li&
< li class =spacer>< / li>
< li class =services>
< a href =services />服务< / a>
< ul class =sub>
< li>< a href =>商标搜索< / a>< / li>
< li>< a href =>准备&文件商标< / a>< / li>
< li>< a href =>商标侵权< / a>< / li>
< / ul>
< / li>
< li class =spacer>< / li>
< li class =testimonials>< a href =testimonials />见证< / a>< / li>
< li class =spacer>< / li>
< li class =more>< a href =javascript：void（0）;>更多信息< / a>< / li&
< li class =spacer>< / li>
< li class =contact>< a href =contact-us />与我们联系< / a>< / li>
< / ul>
< div class =contentClear>< / div>
< / div>
<！ - Nav Ends - >
< div class =right>< / div>
< / div>
<！ - Nav Wrapper Ends - >
CSS：
code> #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;
}
具有定位为 relative ， absolute 或相对，但除了 static ）。
一般来说，你希望绝对地根据它的父类建立的网格来定位项目。
例如：
HTML
< body&
< div id =div1>
< div id =div2-A> [某些内容]< / div>
< div id =div2-B>
< div id =div3> [更多内容]< / div>
< / div>
< / div>
< / div>
CSS
＃div1 {
width：1024px; margin：auto;
position：relative
}
＃div3 {
position：absolute;
bottom：0px; left：0px;
}
在这种情况下，div3将一直位于左侧因为它的直接父对象（div2）具有默认的 position：static ，所以不建立它的绝对定位上下文/网格儿童。但div3不会 （必然）一直到视口或页面体的左边，因为下一个更高的元素（div1）的位置定义为相对。
UPDATE
在您提供的情况下（http://purecssmenu.com/），位置：相对声明正在应用于： hover伪类，因此您不会立即在Google开发人员工具或Firebug列出的样式中看到它。
您可以在Google开发人员工具中检查父元素，然后在样式面板的右侧，单击切换元素状态按钮（看起来像一个带有虚线边框和一个箭头的框），然后选中：旁边的复选框。徘徊。我确定Firebug有类似的东西。
你会看到这个声明添加到列表中：
ul.cssMenu li：hover {position：relative; }
这是因为当你不悬停在父显示：none 隐藏子菜单< ul> ，因此它的位置并不重要。
I've always heard that when you use absolute positioning that the element you want to act as its parent needs to have a position of 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.
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 position of relative even though they were using absolute positioning like I was.
That example is here: http://purecssmenu.com/
So I tried removing my relative positioning and bingo - my problem went away. However now I am using absolute positioning with none of it's parents using relative positioning, they are all set to static.
So I'm wondering how that makes sense - with no relative parents wouldn't it fall back to the browser window?
If need be, here is my 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:
#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;
}
It falls back to the nearest ancestor element that has position defined as relative, absolute, or fixed -- not just relative, but any value other than static (the default).
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
<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
#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.
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.
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.
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.
这篇关于绝对定位及其父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
