绝对定位和它的父元素(Absolute positioning and its parent ele

我一直听说，当你使用绝对定位要作为它的父元素需要有一个position的relative 。

我试图建立一个CSS下拉菜单，我挣扎着爬下拉菜单项伸展超出主菜单项目的宽度，当我有我想它使用设置为它的父元素relative ; 在下拉菜单项的文本将只是包装。

所以我看了看周围其他例如菜单，看看他们是如何做到的，一个我发现甚至没有使用有任何父元素position的relative即使他们使用绝对定位，好像我是人。

这个例子是在这里： http://purecssmenu.com/

所以，我想删除我的relative定位和宾果-我的问题就走了。 不过我现在用的与没有它的父母使用的绝对定位relative定位，它们都被设置为static 。

所以我不知道怎么说是有道理的-没有relative的父母岂不是回落到浏览器窗口？

如果需要的话，这是我的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;
}

Answer 1:

就后退到具有定义为位置最近的祖先元素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 不会 （必要时）一路去视口的左边或页面身体，因为接下来的上涨元素（DIV1）已经位置定义为相。

UPDATE
在这种情况下您所提供（http://purecssmenu.com/），位置：是被应用在相对声明：hover伪类，所以你不会立即看到它在谷歌开发者工具或Firebug的列出样式。

您可以通过检查父元素，然后在“样式”面板的右侧检查这在谷歌开发者工具，点击“切换元状态”按钮，（看起来像虚线边框的盒子和一个箭头指向在它），然后检查旁边的框“：悬停”。 我敢肯定，萤火虫也有类似的东西。

你会看到这个声明添加到列表：

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

这工作，因为当你不徘徊父<li>子菜单<ul>隐藏与display:none ，所以不要紧，它的定位。

Answer 2:

在最近的祖先另一个音符，当一个元件被定位。

的OP后三年后，CSS3属性喜欢更广泛地被使用，其中隐式地创建一个新的包含块变换，迫使元件具有position: relative/absolute;

因此，要确保中介父元素有一个子元素的定位没有影响，你需要检查它position: static ，没有transforms设置。

例

    <div id="one">
      <div id="two">
        <div id="three"></div>
      </div>
    </div>

    #one {
      position: relative;
    }
    #two {
      position: static;
      transform: none;
    }
    #three {
      position:absolute;
    }

文章来源: Absolute positioning and its parent element