I don't get the absolute position


#1

I don’t get the absolute value.

The value I’m playing with is the word “Hello” that’s supposed to be just under “Contact” and is supposed to be aligned center too.

So I’m just playing with it and when I make its position value absolute and don’t assign an offset value to it, it is like this:

But when I assign an offset value, such as “top: 30px;”, it does this:

Why? It says that the element will be positioned relative to its closest positioned parent element. The closest parent element is the Contact right above it as the “Hello” is a div within a div called “Heading” which is the picture and the navigation bar at the top.

Why does it suddenly jump to the top? I’m confused.

Regards,

CEdobor.


#2
position: absolute;

inherits the location on the screen of its relative parent. If the parent is not relatively positioned, then it inherits from the next parent, or body if nothing else. Body is statically positioned so the top left corner will be the reference point for position: absolute.

<div>
    <ul>

    </ul>
</div>
div {
    position: relative;
}
ul {
    position: absolute;
}

In the above, the parent is positioned relative, so no matter where it is on the screen, the UL will be relative to it, but out of normal flow so overlapping the DIV.


#3

Why does it not go to the top left corner after setting the value to absolute? It just moves lower (below the element above’s margin) and to the left. Only after setting the top to 30 does it go to the top left corner.

Regards,

CEdobor


#4

Similarly if I remove “position: relative” from the div .heading in the example above, the class with the position: absolute doesn’t move anywhere, it still stays to the left of the screen and not just under the word Contact)

Regards,

CEdobor


#5

Could we get a look at your raw code (HTML and CSS) in a plain text rather than image? It would give us something to test.

A link to the exercise would be extremely helpful, as well, since we need someplace to do the testing.


#6

Let’s start by understanding what normal flow.

<div>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
</div>
<div>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
</div>
<div>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
<p>Loren ipsum ...</p>
</div>

The above will take up 21 lines of the screen. We won’t be able to distinguish where one division ends and the next begins, but just like the paragraphs they will follow in succession one below the other. This is normal flow.

The DIV containers are without dimension and stretch as paragraphs are inserted. They will, as will their child elements, the paragraphs, take up the full width of the window.

As we talked about earlier, the BODY element defaults to position: static and there really is no reason to change that. We can use any container in normal flow as a parent to an absolutely positioned element just by giving it a position: relative property.

Absolutely positioned elements do not follow normal flow. They go where they are positioned, relative to the first relatively positioned parent.

Only block level elements can be positioned absolutely. Inline elements are not containers of the sort that will consume the width of the window, have no height property, and have no position property.

If you have a workspace open, test this markup and CSS…

<body>
<div>
  <div>
    <div>
      <ul>
        <li>&hellip;</li>
        <li>&hellip;</li>
        <li>&hellip;</li>
        <li>&hellip;</li>
      </ul>
    </div>
  </div>
</div>
</body>

Give it this CSS

div {
  top: 40px;
  left: 40px;
}
body > div {
  position: relative;
  height: 240px;
  width: 240px;
  border: 1px solid red;
}
body > div > div  {
  height: 200px;
  width: 200px;
  border: 1px solid orange;
}
div > div > div {
  height: 160px;
  width: 160px;
  border: 1px solid green;
}
ul {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid blue;
}

This is the view you should get…

outer_relative

Now move the property,

position: relative;

to the body > div > div selector rule. The view should now be,

body-div-div-relative

Finally, move that property to the div > div > div selector rule. You should see this…

div-div-div-relative

Pay particular attention to where the list ends up in each example. An explanation as to why the boxes are where they are relates to this but is secondary to main focus… position: absolute.

Something of important note that relates to normal flow is the extra margin on lists that is written in the default (user agent) style sheet. Lists have a top margin by default, so even while we are drawing the UL 20px lower, add to that the 1em margin and we get about 36px from the top.

Oh, relating to the DIVs themselves, let’s move that rule one more time, into the div selector rule. Now you will see,

div-relative

Notice that since all the DIVs are relatively positioned, they all have a top and left property?

It’s been difficult to find the right words to explain all this, but we have demonstrated that the position property is not inherited, but explicitly declared at each level (generation). The default position of all elements is, static so they always follow normal flow.

Play with it…


#7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.