,
10 tweets,
2 min read
Read on Twitter
CSS2.1: Absolute positioning.
'position: absolute'
means that the element goes where top/left/bottom/right properties tell it to go.
This is relative to its "containing block" which is the next ancestor whose positioning is 'absolute' or 'relative' (or others?)
'position: absolute'
means that the element goes where top/left/bottom/right properties tell it to go.
This is relative to its "containing block" which is the next ancestor whose positioning is 'absolute' or 'relative' (or others?)
'position: fixed' is a kind of absolute positioning, but its containing block is the viewport.
They don't move with scroll.
(if you're formatting for pages, they appear on every page.)
They don't move with scroll.
(if you're formatting for pages, they appear on every page.)
With ‘position: absolute’ if you say ‘top: auto’ then it means “the height it would have in normal flow, don’t change that”
I would have expected it to be like ‘top: 0px’ but nope, it means “it matters where I put this element among the other contents”
I would have expected it to be like ‘top: 0px’ but nope, it means “it matters where I put this element among the other contents”
Z-index: specify what is on top of what.
You can set the z-index property to:
A negative integer: be behind normal stuff
Positive: be in front of normal stuff
(In order of course)
You can set the z-index property to:
A negative integer: be behind normal stuff
Positive: be in front of normal stuff
(In order of course)
Where “normal stuff” is roughly, from back to front:
- blocks
- floats
- inline stuff
Oh but whatever “forms the stacking context” by declaring a z-index other than “auto” - its backgrounds and borders go first (farthest back).
- blocks
- floats
- inline stuff
Oh but whatever “forms the stacking context” by declaring a z-index other than “auto” - its backgrounds and borders go first (farthest back).
Oh hey I forgot the good part of absolute positioning: ‘float’ is ignored.
Both float and absolute/fixed position change the display value, too. A bunch of inline and within-table values just become “Block”. Because a floating or absolute “table-footer-group” doesn’t make sense
Both float and absolute/fixed position change the display value, too. A bunch of inline and within-table values just become “Block”. Because a floating or absolute “table-footer-group” doesn’t make sense
The visual formatting model (ch 9) ends with a description of the ‘direction’ and ‘Unicode-bidi’ properties.
Don’t mess with these if you’re styling HTML. People from the Unicode and HTML standards have worked hard to get them right. CSS collaborates.
Don’t mess with these if you’re styling HTML. People from the Unicode and HTML standards have worked hard to get them right. CSS collaborates.
Next up, chapter 10, Visual Formatting Model... Details
In which we finally get to the detail of calculating width and height!!
