CSS 定位 (Positioning) 实例

1、相对定位，相对于一个元素的正常位置来对其定位

position:relative;
left:-20px

2、使用绝对值来对元素进行定位

通过绝对定位，元素可以放置到页面上的任何位置。下面距离页面左侧 100px，距离页面顶部 150px。

position:absolute;
left:100px;
top:150px

3、固定定位

相对于浏览器窗口来对元素进行定位

position:fixed;
left:5px;
top:5px;

position:fixed;
top:30px;
right:5px;

4、设置元素的形状。此元素被剪裁到这个形状内，并显示出来

img 
{
position:absolute;
clip:rect(0px 500px 200px 0px)
}

5、当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作

background-color:#00FFFF;
150px;
height:150px;
overflow: scroll

overflow: hidden
overflow: auto

6、文本中垂直排列图象

vertical-align:text-top
vertical-align:text-bottom

7、Z-index可被用于将在一个元素放置于另一元素之后

position:absolute;
left:0px;
top:0px;
z-index:-1

默认的 z-index 是 0。负数放在后面，相当于图标背景

8、设置图像的上边缘

position:absolute;
top:0px;
z-index:-1
top:5%
bottom:0px
left:100px
right:20%