This forum is now read-only. Please use our new forums at discuss.codecademy.com.

417 points
Picture
Submitted by
Jared Johnston
over 3 years ago

What is the benefit of position: absolute ignoring its static parent elements?

In exercise 18/25 it says "When an element is set to position: absolute, it's then positioned in relation to the first parent element it has that doesn't have position: static."

I understand how this works thanks to the Q&A forum, but what I don't understand is why absolute positioning was built this way. Why would you choose to nest a position: absolute element inside a position: static element and have it displayed in a completely unrelated position? Can anyone give me an example of how this might be used on a real website?

Cheers guys


0 votes

permalink

Good question, i am thinking about an example. Absolute positioning elements are sometimes really useful. I did want to say two other things, when using margin the absolute element doesn't ignore it's parent element. check out this code bin i made. too me, that doesn't look like it ignores it parent element. However, when you change margin-leftto right and margin-top to bottom, then things change.

if you have this scenario, absolute can't break out either.

I am still about an example, the only scenario i can think of is if you maybe want a slide menu on the left side or something similar. I will think about it and come back to that.

3010 points
5ac0e923961bae76e60003bf_9638442
Submitted by
stetim94
over 3 years ago

4 Comments

Picture Jared Johnston over 3 years ago

Yes, the fact that a position:absolute div with a margin-left property seems to position itself relative to a static parent element was very confusing to me. I observed that when no margin was specified, the element was still positioned within the parent div (at the top left, but still within the boundaries). From this I assumed that margins are not considered part of positioning, and the default margin of an element is the same as it's parent element, regardless of whether it is position: static or not. When a margin is specified for an element, it is added to the existing margin of the parent element. Is this a good way of thinking about it?

5ac0e923961bae76e60003bf_9638442 stetim94 over 3 years ago

The margin-left CSS property sets the margin space required on the left side of a box, so the box just moves x pixels to the left. With no margin the element sit in the top-left, it is when you add left, right etc that the absolute doesn't care about his parent (if parent is static)

5958b8ebe12813a2a3000034_980106998 Roy over 3 years ago

Absolute positioning is out of normal flow so does not inherit margins.

Picture Jared Johnston over 3 years ago

But absolute positioning does inherit margins of even static parents. This is why I ask if margins are not considered part of positioning.


0 votes

permalink

Absolute positioning causes the browser to course down the tree from the current element until it finds a node with a position property. If none are found it ends in the body at 0,0.

To an absolutely positioned element, margin-top and top have the same reference, but if both are declared, they add up. Same goes for all the other margins and position references. Save and run the page below, then comment the margin property (or the top property) on #absoluteme and save and run again.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>position relativity</title>
<style>
    body {
        width: 100%;
        font-size: 100%;
        color: black;
        background-color: white;
    }
    body > div {
        width: 95%;
        height: 20em;
        margin: 1em auto;
        border: 5px double #89a;
    }
    #relativeme {
        position: relative; 
        width: 75%; 
        margin: 4.5em auto; 
        background-color: #def; 
        height: 10em; 
    }
    #absoluteme {
        position: absolute; 
        top: 2.5em;
        right: 2.5em;       
        margin-top: 2.5em;
        background-color: #fed; 
        width: 20em;
        height: 5em;
    }
</style>
</head>
<body>
  <div>
    <div>
      <div id="relativeme">
        <div>
          <div>
            <div id="absoluteme">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

We see where the browser searched down the tree until it found #relativeme and took its bearings from there. The position references of this node are handed back up the tree.

8822 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
over 3 years ago

2 Comments

Picture Jared Johnston over 3 years ago

I think I understand how it works, but I can't see how I could make practical use of the fact that position: absolute element ignore position: static parent element when determining their own position.

5958b8ebe12813a2a3000034_980106998 Roy over 3 years ago

Did you open this page on your machine? With the alternate style sheet from below?


0 votes

permalink

This style sheet doesn't really illustrate anything as much as show where everything is relative to one another given their inherited properties.

body {
    width: 100%;
    font-size: 100%;
    color: black;
    background-color: white;
}
body > div {
    width: 95%;
    height: 20em;
    margin: 1em auto;
    border: 5px double #89a;
}
div :first-child {
    margin: 1em;
    height: 90%;
    background-color: inherit;
    border: 1px inset #a98;
}
#relativeme {
    position: relative; 
    width: 75%; 
    margin: 4.5em auto; 
    background-color: #def; 
    height: 10em; 
}
#absoluteme {
    position: absolute; 
    top: 2.5em;
    right: 2.5em;
    background-color: #fed; 
    width: 20em;
    height: 5em;
}

Notice how the absolutely positioned element does not resize with reduction of screen width? It's the only element with a value dimension, rather than a percentage. This has a practical use, especially if it's a warning message. It is more difficult to mitigate.

Tweak to body:

<body>
  <div>
    <div>
      <div id="relativeme">
        I'm handing my position references to...
        <div>
          <div>
            <div id="absoluteme">
              ...this node.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

8822 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
over 3 years ago

3 Comments

Picture Jared Johnston over 3 years ago

But why would you nest inside two other unrelated divs? I changed the code so the was the 2nd child of (the first child being ), and it got the same results.

5958b8ebe12813a2a3000034_980106998 Roy over 3 years ago

This is an illustration. In a full blown document this much nesting is pretty normal. One doesn't set out to write it this way, the structure tends toward it. The main point is to see where #absoluteme gets its position references from. The first ancestor with a position property, #relativeme.

Picture Jared Johnston over 3 years ago

I see where the position references come from, that's not the issue. I've just see a lot of confusion regarding position:absolute elements ignoring static parents. You said that "In a full blown document this much nesting is pretty normal. One doesn't set out to write it this way, the structure tends toward it". Do you mean that the fact that position:absolute elements ignore static parents was only built into the language so that people didn't have to reshuffle their html structure? What I'm hearing is that if I keep my html structure organised, I will never have to make use of this feature.