CODEWITHSUNDEEP
csscss-position
Kenny Bones
Kenny Bones

Reputation: 5129

Understand default placement of absolute positioned element

This is probably a no-brainer for you guys, but I'm trying to understand the default behaviour of absolute positioned elements. I've read that an absolute positioned element is removed from the document flow, meaning the surrounding elements behave as if it wasn't there in the first place.

Now, for the default placement of absolute positioned elements. Shouldn't it appear in the top left corner of it's parent that has position: relative;?

I've set up an example of what I mean on JSFiddle

This example consists of the following markup:

#top_header_nav {
  position: relative;
  display: table;
  margin: 0 auto;
}

ul {
  padding: 0;
  margin-left: 15px;
  margin-right: 15px;
}

li,
img,
ul {
  display: inline-block;
}

img {
  margin: 10px 30px 0px 30px;
}

li {
  font-size: 24px;
  margin-left: 30px;
}

li:first-child {
  margin-left: 0px;
}
<nav id="top_header_nav">
  <ul>
    <li>Menu item 1</li>
    <li>Menu item 2</li>
  </ul>
  <img id="top_header_nav-logo" src="http://i1202.photobucket.com/albums/bb380/blogbiztutor/Blogger/Button/bth_google-logo.gif"></img>
  <ul>
    <li>Menu item 3</li>
    <li>Menu item 4</li>
  </ul>
</nav>

The idea here is that a media query should alter the position of the image, to appear on top of the menu. Now, setting the image to position: absolute; results in the image appearing not in the top left corner (as I expected), but somehow relative to the previous element in the markup, the first ul element. I'd expect it to not care about the other elements at all, just it's parent, which has relative positioning.

This is no biggie, I can just add left: 0;, but why doesn't that happen by default? Just trying to grasp the nature of absolute positioning.

Upvotes: 5

Views: 1127

Answers (1)

Pandaiolo
Pandaiolo

Reputation: 11568

If you set the img to position: absolute, it will get out of the flow, but stay where it is in the normal flow. The document and other elements will behave like the absolutely positioned element does not exist.

Only by applying top, bottom, left or right values, will make it actually go somewhere

From the W3C wiki :

The box is taken out of the normal flow. The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties.

W3C wiki CSS:position

Note: This has been replied in this SO question

Upvotes: 4

Related Questions