This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Jared Johnston
over 8 years

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

Answer 55922c1ad3292fcb07000093

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.

points
Submitted by stetim94
over 8 years

4 comments

Jared Johnston over 8 years

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?

stetim94 over 8 years

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)

Roy over 8 years

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

Jared Johnston over 8 years

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

Answer 55924967e0a3007ff9000cf3

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.

points
Submitted by Roy
over 8 years

2 comments

Jared Johnston over 8 years

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.

Roy over 8 years

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

Answer 55924e1be0a3006892000d63

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>
points
Submitted by Roy
over 8 years

3 comments

Jared Johnston over 8 years

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.

Roy over 8 years

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.

Jared Johnston over 8 years

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.