CSS - Positioning

css

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?

  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.

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)
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License