- 没有相关文章
CSS定位属性允许你对元素进行定位。
CSS 定位 (Positioning)实例：
定位：相对定位
本例演示如何相对于其正常位置来定位元素。
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>This is a heading in normal position</h2>
<h2 class="pos_left">This heading is moved left to its normal position</h2>
<h2 class="pos_right">This heading is moved right to its normal position</h2>
<p>Relative positioning moves an element RELATIVE to its original position.</p>
<p>The style "left:-20px" subtracts 20 pixels from the element's original left position.</p>
<p>The style "left:20px" adds 20 pixels to the element's original left position.</p>
</body>
</html>
定位：绝对定位
本例演示如何使用绝对值来定位元素。
<html>
<head>
<style type="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">This is a heading with an absolute position</h2>
<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 100px from the left of the page and 150px from the top of the page.</p>
</body>
</html>
设置元素的形状
本例演示如何设置元素的形状。此元素被剪入这个形状中，然后被显示出来。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
</style>
</head>
<body>
<p>The clip property is here cutting an image:</p>
<p><img border="0" src="bookasp20.gif" width="120" height="151"></p>
</body>
</html>
