Absolute positioning and its parent element

Question

I have always heard that when you use absolute positioning, an element that you want to act as its parent requires position relative .

I tried to create a CSS drop-down menu, and I tried my best to make the drop-down menu elements stretch beyond the width of the main menu item, when I had its parent item, I wanted it to use set as relative ; the text in the drop-down menu items will simply be completed.

So I looked at other examples of menus to see how they did it, and the one I found didn’t even use any parent elements with position from relative , although they used absolute positioning like me.

Here is an example: http://purecssmenu.com/

So, I tried to remove my positioning and relative bingo - my problem disappeared. However, now I use absolute positioning, while none of the parents use relative positioning, they are all set to static .

So, I wonder how this makes sense - parents without relative do not return to the browser window?

If needed, 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 &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

It returns to the nearest predecessor element, which has a position defined as relative , absolute or fixed , not only relative , but any value other than static (default).

Typically, you want to place an element exactly in accordance with the grid set by its parent. However, sometimes it makes sense to place it on a grid set by a higher 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 located completely to the left and at the bottom of div1 - his grandfather - because his immediate parent (div2) has a default value of position:static and therefore does not set the context / grid absolute positioning for his children. But div3 will not (necessarily) go all the way to the left of the viewport or page body, because the next higher up (div1) element has a position defined as relative.

UPDATE
In the case that you provided (http://purecssmenu.com/), the position: relative declaration is applied in the: hover pseudo-class, so you will not see it immediately in the styles specified in the Google Developer Tools or Firebug.

You can check this in the Google developer tools by checking the parent element, then on the right side of the Styles panel click the "Switch element element" button (looks like a box with a dotted border and an arrow pointing in it), then check the box next to " : hover ". I'm sure Firebug has something similar.

You will see this ad added to the list:

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

This works because when you do not hover over the parent <li> , the <ul> submenu hides with display:none , so it doesn't matter where it is located.

Answer 2

Another note about the closest ancestor when the item is located.

Three years after the OP, CSS3 properties, such as conversion, are used more widely, which implicitly creates a new containing block, forcing the element to have position: relative/absolute;

So, so that the intermediate parent elements do not affect the positioning of the child element, you need to check that it has position: static and no 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; }