Page 108 - DCAP408_WEB_PROGRAMMING

Web Programming

Notes In addition to determining position offsets, positioning properties also specify the visible display
area of an element’s rendering box (‘clip’) and directives indicating what should happen when
an element’s content falls outside the rendering box (‘overflow’.)
But, positioning in CSS is not just about rendering in 2-dimensions. It also allows for placement
and overlap of elements in an imaginary third dimension perpendicular to the screen (‘z-axis’.)
The final property included in this category, ‘vertical-align’, is not involved with “CSS positioning”
per se, but it does involve vertical positioning of content within a rendered line box.
The number in the "CSS" column indicates in which CSS version the property is defined.
1. bottom: Sets the bottom margin edge for a positioned box
2. clip: Clips an absolutely positioned element
3. cursor: Specifies the type of cursor to be displayed
4. left: Sets the left margin edge for a positioned box

5. overflow: Specifies what happens if content overflows an element's box
6. position: Specifies the type of positioning for an element
7. right: Sets the right margin edge for a positioned box
8. top: Sets the top margin edge for a positioned box
9. z-index: Sets the stack order of an element
Property Description
height Sets the height of an element

max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
width Sets the width of an element
POSITIONING
auto
bottom %
length
shape
clip
auto
auto
left %
length
overflow visible | hidden | scroll | auto
position static | relative | absolute | fixed
auto
right %
length
auto
top %
length
baseline | sub | super | top | text-top | middle | bottom | text-bottom
vertical-align length
%
auto
z-index
number

102 LOVELY PROFESSIONAL UNIVERSITY