https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
http://www.w3.org/TR/WD-positioning-970131
http://quirksmode.org/css/css2/position.html
http://learnlayout.com/position.html
http://www.corelangs.com/css/box/positioning.html
http://phrogz.net/css/htmlvsbody.html
https://css-tricks.com/absolutely-position-element-within-a-table-cell/
// CSS - Positioning:
1. absolute — An element that has been assigned position:absolute is taken out
of the normal flow. This means that the content around it will act like the
absolutely-positioned element never existed. That element will instead be
positioned according to its distance from the edges of the entire page.
2. fixed — An element that has been assigned position:fixed is taken out of the
normal flow, similar to position:absolute. However, a fixed element will be
positioned according to its distance from the edges of the viewable page and
will stay visible even when the page is scrolled. It should be noted that
Internet Explorer 6 does not support fixed positioning and that any fixed
elements will scroll.
3. inherit — This value simply means that the element inherits the positioning
set for its parent element.
4. relative — An element that has been assigned position:relative will remain
within the normal flow, meaning that a placeholder the exact size of the
element will mark its original place, even if that element has been
positioned elsewhere. Any position changes are also relative to the element's
original position and not the borders of the page or the viewing area.
5. static — The default positioning of all elements. Static elements remain in
the normal page flow and do not move.
The absolute, fixed, and relative positions should be used in conjunction with
the top, right, bottom, and left properties. Each of those properties can be
given values in ems, pxs, or percentages as well as the values top, right,
bottom, and left.
The z-index property specifies the stack level of a box whose position is
absolute, fixed, or relative. The stack level refers to the position of the box
along the z axis, which run perpendicular to the screen. The higher the value,
the closer the box is to the user. In other words, a box with higher z-index
will obscure a box with lower z-index. The z-index property set the stack level
of the box in the current stacking context and also establishes a new stacking
context. The box itself has stack level 0 (zero) in the new context. The value
auto gives the box the same stack level as its parent, and does not establish a
new stacking context.
The z-index only work on an element whose position property has been explicitly
set to absolute, fixed, or relative.
The z-index property can affect the stack order of both block-level and inline
elements.
The width of an element with position:absolute depends on the width of its
content. If the width of the content is set as a percentage, it depends on the
width of the parent (which has positon:absolute). So we have circular dependency.
CSS 2.1 specification defined this behavior as undefined. To work around this,
we can explicitly set the width of the parent element (which has position:
absolute) to 100% (the width of the view port or width of its container)
What are the acceptable values for the position attribute?
- absolute — An element that has been assigned position:absolute is taken out of the normal flow. This means that the content around it will act like the absolutely-positioned element never existed. That element will instead be positioned according to its distance from the edges of the entire page.
- fixed — An element that has been assigned position:fixed is taken out of the normal flow, similar to position:absolute. However, a fixed element will be positioned according to its distance from the edges of the viewable page and will stay visible even when the page is scrolled. It should be noted that Internet Explorer 6 does not support fixed positioning and that any fixed elements will scroll.
- inherit — This value simply means that the element inherits the positioning set for its parent element.
- relative — An element that has been assigned position:relative will remain within the normal flow, meaning that a placeholder the exact size of the element will mark its original place, even if that element has been positioned elsewhere. Any position changes are also relative to the element's original position and not the borders of the page or the viewing area.
- static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.
The absolute, fixed, and relative positions should be used in conjunction with the top, right, bottom, and left properties. Each of those properties can be given values in ems, pxs, or percentages as well as the values top, right, bottom, and left.
What happen if element has been assigned position:absolute and has a parent element that has been assigned position:relative?
If an element as been assigned position:absolute and has a parent element that has been assigned position:relative, the child element will be positioned according to the boundaries of its parent, rather than the boundaries of the page.
When a box has position:absolute, it is positioned relative to its closest positioned ancestor. (same as above, but just re-phrased differently) To position a child block absolutely (position:absolute) within the boundary of its parent, establish a new stacking context on the parent by adding positon:relative to the parent.
What is the purpose of the z-index attribute?
z-index: The z-index property specifies the stack level of a box whose position is absolute, fixed, or relative. The stack level refers to the position of the box along the z axis, which run perpendicular to the screen. The higher the value, the closer the box is to the user. In other words, a box with higher z-index will obscure a box with lower z-index. The z-index property set the stack level of the box in the current stacking context and also establishes a new stacking context. The box itself has stack level 0 (zero) in the new context. The value auto gives the box the same stack level as its parent, and does not establish a new stacking context.
z-index only work on an element whose position property has been explicitly set to absolute, fixed, or relative.
z-index property can affect the stack order of both block-level and inline elements.
Can the value for the z-index property be negative?
Value for z-index can be negative. In Firefox, version up to and including 2, a negative stack level positions the box behind the stacking context, rather than above the context's background and borders and below block-level descendants in the normal flow.
How does the width of an element behave when it has position:absolute?
The width of an element with position:absolute depends on the width of its content.. If the width of the content is set as a percentage, it depends on the width of the parent (which has positon:absolute). So we have circular dependency. CSS 2.1 specification defined this behavior as undefined. To work around this, we can:
- explicitly set the width of the parent element (which has position:absolute) to 100% (the width of the view port or width of its container)