css – 绝对定位及其父元素

我一直听说,当你使用绝对定位时,你想要充当其父元素的元素需要具有相对位置.

我正在尝试构建一个CSS下拉菜单,当我有它的父元素我希望它使用set作为相对时,我正努力让下拉菜单项超出主菜单项的宽度;下拉菜单项中的文本只会换行.

所以我环顾了其他示例菜单,看看他们是如何做到这一点的,我发现甚至没有使用任何具有相对位置的父元素,即使他们使用的是像我一样的绝对定位.

所以我尝试删除我的相对定位和宾果 – 我的问题消失了.然而,现在我使用绝对定位,没有使用相对定位的父母,他们都设置为静态.

所以我想知道这是多么合理 – 没有相对的父母会不会回到浏览器窗口？

如果需要,这是我的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 &amp; 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;
}

解决方法

它回退到最近的祖先元素,其位置定义为相对,绝对或固定 – 不仅仅是相对,而是静态以外的任何值(默认值).

通常,您希望根据其父级建立的网格绝对定位项目.但是,有时将它定位到由更高元素建立的网格是有意义的.

例如：

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)具有默认位置：static,因此不会为其子节点建立绝对定位上下文/网格.但是div3不会(必然)一直到视口左侧或页面体,因为下一个更高的向上元素(div1)的位置被定义为相对.

UPDATE
在您提供的情况下(http://purecssmenu.com/),位置：相对声明正在应用于：hover伪类,因此您不会立即在为Google Developer Tools或Firebug列出的样式中看到它.

您可以通过检查父元素在Google开发人员工具中进行检查,然后在“样式”面板的右侧单击“切换元素状态”按钮,(看起来像带有虚线边框的框和指向的箭头它),然后选中“：hover”旁边的框.我敢肯定Firebug有类似的东西.

您会看到此声明已添加到列表中：

ul.cssMenu li:hover { position: relative; }

这是有效的,因为当您没有悬停在父< li>上时,子菜单< ul>使用display：none隐藏,因此无论它位于何处都无关紧要.

原文地址：https://www.jb51.cc/css/215416.html

css – 绝对定位及其父元素

解决方法

相关推荐