The CSS positioning property allows you to position elements.
CSS positioning (positioning) instance:
positioning: Relative positioning
This example shows how to position an element relative to its normal position.
<style type= "Text/css" >
H2.pos_left
{
position:relative;
left:-20px
}
H2.pos_right
{
position:relative;
left:20px
}
</style>
<body>
<H2 class= "Pos_left" >this heading is moved left to its normal position<H2 class= "Pos_right" >this heading is moved right to its normal position<p>relative positioning moves a element relative to its original position.</p>
<p>the style "left:-20px" subtracts pixels from the element ' s original left position.</p>
<p>the style "left:20px" adds pixels to the element ' s original left position.</p>
</body>
positioning: Absolute positioning
This example shows how to use absolute values to locate an element.
<style type= "Text/css" >
H2.pos_abs
{
Position:absolute;
left:100px;
top:150px
}
</style>
<body>
<H2 class= "Pos_abs" >this is a heading with a absolute position<p>with absolute Positioning, an element can is placed anywhere on a page. The heading below is placed 100px to the left of the page and 150px from the top of the page.</p>
</body>
to set the shape of an element
This example shows how to set the shape of an element. This element is clipped into this shape and is then displayed.
<style type= "Text/css" >
Img
{
Position:absolute;
Clip:rect (0px 50px 200px 0px)
}
</style>
<body>
<p>the Clip property is this cutting an image:</p>
<p></p>
</body>
Overflow
This example demonstrates how to set an overflow property to specify the appropriate action when the content of the element is too large to exceed the specified area.
<style type= "Text/css" >
Div
{
Background-color: #00FFFF;
width:150px;
height:150px;
Overflow:scroll
}
</style>
<body>
<p>the Overflow Property decides what to does if the content inside an element exceeds the given width and height prop Erties.</p>
<div>
can use the "overflow property" you want to have better control of the layout. Try to change the overflow property to:visible, hidden, auto, or inherit and the What. The default value is visible.
</div>
</body>
vertical arrangement of images
This example shows how to vertically arrange the image in the text.
<style type= "Text/css" >
img.top {Vertical-align:text-top}
Img.bottom {Vertical-align:text-bottom}
</style>
<body>
<p>
This is
src= "Http://www.webjx.com/i/example_moving.gif"/>
Image inside a paragraph.
</p>
<p>
This is
src= "Http://www.webjx.com/i/example_moving.gif"/>
Image inside a paragraph.
</p>
</body>
Z-index
Z-index can be used to place an element after another element.
<style type= "Text/css" >
img.x
{
Position:absolute;
left:0px;
top:0px;
Z-index:-1
}
</style>
<body>
<p>default Z-index is 0. Z-index-1 has lower priority.</p>
</body>
Z-index
The elements in the above example have changed the Z-index.
<style type= "Text/css" >
img.x
{
Position:absolute;
left:0px;
top:0px;
Z-index:1
}
</style>
<body>
<p>default Z-index is 0. Z-index 1 has higher priority.</p>
</body>
CSS positioning properties (positioning)
The CSS positioning property allows you to position elements.
browser support :IE: Internet Explorer, F: Firefox, N: Netscape.
The number of the "Positioning" column shows which CSS standard definition (CSS1 or CSS2) is defined by the location (s) attribute.
| Property | Description | Values | IE | F | N | TheConsortium |
|---|---|---|---|---|---|---|
| Bottom | Sets the distance between the bottom edge of an element and the bottom edge of its parent element. |
|
5 | 1 | 6 | 2 |
| Clip | Sets the shape of the element. The elements are clipped into the shape and then displayed. |
|
4 | 1 | 6 | 2 |
| Left | Sets the distance between the left side of the element and the right or left side of its parent element. |
|
4 | 1 | 4 | 2 |
| Overflow | Sets how content is managed when element content overflows its area |
|
4 | 1 | 6 | 2 |
| Position | Place an element in a static, relative, absolute, or fixed position |
|
4 | 1 | 4 | 2 |
| Right | Sets the distance between the right side of the element and the left or right side of the parent element |
|
5 | 1 | 6 | 2 |
| Top | Sets the distance above or below the top edge of the parent element for the top margin of the element |
|
4 | 1 | 4 | 2 |
| Vertical-align | Sets the vertical arrangement of elements. |
|
4 | 1 | 4 | 1 |
| Z-index | To set the stacking order of elements |
|
4 | 1 | 6 | 2 |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
