w3pop.com :: ÍøÂçѧԺ :: CSS :: CSS ¶¨Î»
The CSS positioning properties allows you to position an element.
ʹÓÃCSS¶¨Î»ÊôÐÔ¿ÉÒÔÈÃÄ㶨ÒåÔªËØµÄλÖÃ
Position:relative
This example demonstrates how to position an element relative to its normal position.
ÈçºÎÈÃÒ»ÔªËØÏà¶ÔÓÚÔʼλÖýøÐÐÏà¶Ô¶¨Î»
Position:absolute
This example demonstrates how to position an element using an absolute value.
ÈçºÎʹÓþø¶ÔÖµÀ´¶¨Î»ÔªËØ
Set the shape of an element
This example demonstrates how to set the shape of an element. The element is clipped into this shape, and displayed.
ºÎÈçÉèÖÃÔªËØµÄÐÎ×´£¬²¢ÒÔÕâ¸öÐÎ×´ÏÔʾ
Overflow
This example demonstrates how to set the overflow property to specify what should happen when an element's content is too big to fit in a specified area.
µ±ÔªËصÄÄÚÈݳ¬¹ýÁËÖ¸¶¨µÄ·¶Î§£¬overflowÊôÐԾͿÉÒÔÖ¸¶¨Ó¦¸ÃÒÔÔõÑùµÄÐÎʽÀ´´¦Àí
Vertical align an image
This example demonstrates how to vertical align an image in a text.
ÈçºÎ´¹Ö±¶ÔÆëÒ»ÕÅͼƬ
Z-index
Z-index can be used to place an element "behind" another element.
Z-index¿ÉÒÔÈÃÒ»ÔªËØ·Åµ½ÁíÒ»ÔªËØµÄ"ºóÃæ"
Z-index
The elements in the example above have now changed their Z-index.
ÉÏÃæÀý×ÓÖеÄÔªËØÏÖÔÚZ-indexÖµÒѾ·¢ÉúµÄ±ä»¯
The CSS positioning properties allow you to specify the left, right, top, and bottom position of an element. It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.
CSS¶¨Î»ÊôÐÔÔÊÐíÄãÖ¸¶¨ÔªËØÉÏÏÂ×óÓÒµÄλÖá£Ò²ÔÊÐíÄãÉèÖÃÔªËØµÄÐÎ×´£¬½«ÔªËذ²ÖÃÔÚÁíÒ»¸öÔªËØµÄºóÃæ£¬²¢Ö¸¶¨µ±ÔªËØÄÚÈݳ¬³ö·¶Î§ºóÓ¦¸ÃÔõô×ö¡£
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
Ö§³ÖµÄä¯ÀÀÆ÷£ºIE£¬F£¬N
W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).
| ÊôÐÔ | ÃèÊö | Öµ | IE | F | N | W3C |
|---|---|---|---|---|---|---|
| bottom | Sets how far the bottom edge of an element is above/below the bottom edge of the parent element ÉèÖöÔÏóÓëÆä×î½üÒ»¸ö¾ßÓж¨Î»ÉèÖõĸ¸¶ÔÏóµ×±ßÏà¹ØµÄλÖà |
auto % length |
5 | 1 | 6 | 2 |
| clip | Sets the shape of an element. The element is clipped into this shape, and displayed ÉèÖöÔÏóµÄ¿ÉÊÓÇøÓò¡£ |
shape auto |
4 | 1 | 6 | 2 |
| left | Sets how far the left edge of an element is to the right/left of the left edge of the parent element ÉèÖöÔÏóÓëÆä×î½üÒ»¸ö¾ßÓж¨Î»ÉèÖõĸ¸¶ÔÏó×ó±ßÏà¹ØµÄλÖà |
auto % length |
4 | 1 | 4 | 2 |
| overflow |
Sets what happens if the content of an element overflow its area ÉèÖõ±¶ÔÏóµÄÄÚÈݳ¬¹ýÆäÖ¸¶¨¸ß¶È¼°¿í¶ÈʱÈçºÎ¹ÜÀíÄÚÈÝ |
visible hidden scroll auto |
4 | 1 | 6 | 2 |
| position | Places an element in a static, relative, absolute or fixed position ¾ö¶¨ÔªËصĶ¨Î»·½Ê½ |
static relative absolute fixed |
4 | 1 | 4 | 2 |
| right | Sets how far the right edge of an element is to the left/right of the right edge of the parent element ÉèÖöÔÏóÓëÆä×î½üÒ»¸ö¾ßÓж¨Î»ÉèÖõĸ¸¶ÔÏóÓÒ±ßÏà¹ØµÄλÖà |
auto % length |
5 | 1 | 6 | 2 |
| top | Sets how far the top edge of an element is above/below the top edge of the parent element ÖöÔÏóÓëÆä×î½üÒ»¸ö¾ßÓж¨Î»ÉèÖõĸ¸¶ÔÏó¶¥±ßÏà¹ØµÄλÖà |
auto % length |
4 | 1 | 4 | 2 |
| vertical-align | Sets the vertical alignment of an element ÉèÖÃÔªËØ´¹Ö±¶ÔÆë·½Ê½ |
baseline sub super top text-top middle bottom text-bottom length % |
4 | 1 | 4 | 1 |
| z-index | Sets the stack order of an element ÉèÖöÔÏóµÄ²ãµþ˳Ðò |
auto number |
4 | 1 | 6 | 2 |