Introduction to Cascading Style Sheets
Extra Credit
Notes from CSS class...
Week Five
Position places elements on the page. It has three possible values:
- relative
Places the element relative to its expected position in the normal flow of the page.
The space the element would have occupied remains blank.
Use position:relative with top: and left: to define positioning inline.
- absolute
Places the element relative to the browser window or to the containing (parent)
element. The element does not fall in to the normal flow of the document.
The space the element would have occupied closes up.
Coordinates for absolute positioning originate at the top-left
corner of the browser window.
Absolute positioning uses the top: and left: properties.
- static
Static is the default position for the position property.
Static elements cannot be positioned or repositioned.
They cannot serve as the marker for an absolutely positioned element.
Use top: and left: with a length measurement or percentage to
move the element down and right.
Use negative values to move the element up and left.
Z-index creates a stacking order for overlapping positioned elements.
It creates a third dimension in the browser window.
- The element with the lowest z-index value appears at the bottom of the stack.
Elements with higher z-index values will obscure those with lower z-index values.
- Visibility:hidden; will make an element invisible while leaving its empty space open.
Display:none; will make an element disappear, taking its space with it.
- Overflow takes the values hidden, visible or scroll.
|