我一直听说,当您使用绝对定位时,您想要充当其父元素的元素需要具有相对
的position
。
我试图构建一个 CSS 下拉菜单,当我有它的父元素时,我努力让下拉菜单项超出主菜单项的宽度,我希望它使用 set as relative
;下拉菜单项中的文本将自动换行。
所以我查看了其他示例菜单,看看他们是如何做到的,我发现其中一个菜单甚至没有使用 relative
的 position
的父元素,尽管他们像我一样使用绝对定位。
这个例子在这里:http://purecssmenu.com/
所以我尝试删除我的 relative
定位和宾果游戏 - 我的问题消失了。但是现在我使用绝对定位,它的父级都没有使用 relative
定位,它们都设置为 static
。
所以我想知道这有什么意义 - 如果没有 relative
parent ,它不会退回到浏览器窗口吗?
如果需要,这是我的 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;
}
最佳答案
它回退到位置定义为 relative
的最近的祖先 元素, absolute
, 或 fixed
-- 不只是 relative
, 但除 static
以外的任何值(默认)。
通常,您希望根据其父级建立的网格绝对定位元素。但是,有时将其定位到由更高层元素建立的网格中是有意义的。
例如:
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;
}
在这种情况下,div3 将一直定位到 div1(它的祖父)的左侧和底部,因为它的直接父级 (div2) 具有默认值 position:static
,因此不会为其子项建立绝对定位上下文/网格。但是 div3 不会(必然)一直到视口(viewport)或页面主体的左侧,因为下一个更高的元素 (div1) 的位置定义为相对。
更新
在您提供的情况下 (http://purecssmenu.com/),position:relative 声明应用于 :hover 伪类,因此您不会立即在为 Google Developer Tools 或 Firebug 列出的样式中看到它.
您可以通过检查父元素在 Google 开发人员工具中检查它,然后在“样式”面板的右侧,单击“切换元素状态”按钮,(看起来像一个带有虚线边框和箭头指向它),然后选中“:悬停”旁边的框。我确定 Firebug 有类似的东西。
您会看到此声明已添加到列表中:
ul.cssMenu li:hover { position: relative; }
这是有效的,因为当你没有将鼠标悬停在父级 <li>
上时, 子菜单 <ul>
用 display:none
隐藏, 所以它的位置并不重要。
关于css - 绝对定位及其父元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11862330/