0

Please consider the following CSS. Note that there are no other CSS rules defined or in effect in this situation:

* {
    position: absolute;
    color: red;
}

div {
    position: static;
    color: blue;
}

When I add a div with a bit of text, which is live here, the text in the div no longer traverses the entire screen. It is as though the width property of the div is set to 10%. If I remove the position:absolute declaration from the wildcard, the div returns to normal (the text goes the whole way across the screen). This is puzzling to me, since I have all divs defined with the position:static declaration. I tried this with and without the famous "reset.css" stylesheet included, and I am getting the same results.

At first i thought that perhaps the wildcard rule takes presidence over the div rule in CSS. That would have been simple enough. However, I have the color property of the wildcard rule set to red and the color property of the div rule set to blue, and the text is showing up blue. So the answer cannot simply be that the wildcard rule takes precedence over the div rule.

One thing I think might be relevant: an absolutely positioned element is positioned relative to its first positioned (not static) ancestor element. In this case, the body has no such ancestor, and therefore this is probably just some kind of silent error caused be the body being set to absolute positioning but with no positioned ancestor element.

Does anyone know what the cause of this odd behavior is?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
orb
  • 1,263
  • 1
  • 10
  • 16
  • As a side note, I have been working on a JavaScript library that uses graphics theory perform 2d and 3d transformations on text, images, and other page content. I have set my coordinate system up so that 0,0 is always the center of the screen (call it modelview space), and then I transform elements' vertices to window space before the are drawn/rendered. A have been using absolute positioning to construct these mathematical spaces, and that is why I am delving so deep into the behavior behind absolute positioning. – orb Apr 26 '13 at 02:32
  • (And admittedly finding myself banging my head against the wall from time to time—as I probably deserve for completely abandoning the natural flow of the document. :-) – orb Apr 26 '13 at 02:34
  • I'd [avoid using the `*` selector](http://stackoverflow.com/questions/1714096/why-is-the-css-star-selector-considered-harmful) if you can. The more specific the selectors are the better performance you will get. – Useless Code Apr 26 '13 at 05:29

2 Answers2

2

The position: absolute applies to the <div>'s parents.
It makes them shrinkwrap to fit their contents – the text of the <div>.

Since the <div>'s layout area no longer encompasses the full page width, it doesn't stretch.

You can fix this by adding width: 100% and getting rid of margins and padding.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • This question is not asking about properties. He wants to know how to override styles – Cody Guldner Apr 26 '13 at 02:03
  • No I know how to override styles. It seems that the matter is that position:absolute not only removes the element from the natural flow of the document, but also has some side effect like the 'shrinkwrap' behavior SLaks described above. – orb Apr 26 '13 at 02:10
  • Perhaps the side effect is that block elements loose some of the behavior associated with block elements. (well, it seems like that is what is happening here—it seems the body element is collapsing and the div is merely doing what it is supposed to do—fill its parent element (i.e, the body). – orb Apr 26 '13 at 02:13
  • 1
    @orb: The side effects are all documented [here](http://www.w3.org/TR/CSS21/visudet.html). – BoltClock Apr 26 '13 at 05:28
1

Make html and/or body position static as well:

Demo with html { position: static; }
Demo with body { position: static; }

Or, change your selector to body *:

body * {
    position: absolute;
    color: red;
}
div {
    position: static;
    color: blue;
}
gilly3
  • 87,962
  • 25
  • 144
  • 176