CSS Rules - Visual Formatting and Positioning |
The display properties is used by style sheets to place objects inline, block and list-items. Positioning uses the imaginary grid to place objects using the X Y Coordinates. Z-index specifies the stacking order of objects in front of the other.
|
| display | Indicates type of display box-
• inline- creates an inline display box
• block- block display box
• list-item -list-item inline display box
• marker - content :befor or :after tag
• none - no display box
•run-in-block similar to a display box
selector {display:block;position:relative;top:20px; right:40px}
|
|---|
| position | Defines the positioning method
• static -default;normal HTML box
• relative -box is offset from normal position
• absolute -offset from its containing box's position
• fixed -does not move when window is adjusted
• inherit -takes parent value
selector {position:absolute;display:block;top:20px; right:40px}
|
|---|
top, right,
bottom, left | Defines the offset width from the specified edge
ul{top:20px; right:40px} |
|---|
height
|
Specifies height of the display box
Auto-enables browser to select value blockquote {height:210px}
|
|---|
| width | Defines the display box width: Any value in pixels or %
Auto-enables browser to select value
blockquote {height:210px; width:105px} |
|---|
float
| Identifies whether the display box floats left or right
values: none left, right, inherit
img {float:right}
|
|---|
| clear | Displays content next to the side of the float box or not; none (default)
left-Content does NOT appear to the left of the float box
right-Content doesn't appear to the right of the float box
both-Content does NOT appear to the left/right of the float box
img {clear:both}
|
|---|
line-height
vertical-align
visibility
z-index
|
Defines the line spacing for the element
Defines the vertical inside position of the box
Defines visibility:hidden or visible
Defines stacking order; img{z-index:3} |
|---|
|
|