您的位置：首页 > Web前端 > CSS

css中z-index与position属性的巧妙应用

2008-08-19 17:03 507 查看
合理运用z-index属性,以及position属性,来遮挡你想遮挡的任何东西，以下是相关测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>无标题页</title>

</head>

<body>

<div style="position:relative; width:150px; height:100px; z-index:2; background-color:Red;"></div>

<div style="position:relative; width:150px; height:100px; z-index:1; top:-20px; background-color:Blue;"></div>

</body>

</html>

说明：

第一个DIV模块中,我们定义了宽度为150,高度为100，背景色为红色，z-index:2 inherit;此DIV的级别为2

第二个DIV模块中,我们定义了宽度亦为150,高度为100，背景色为蓝色，z-index:1 inherit;此DIV级别为1,top:-20px垂直向上-20象素.

2>1

上面的DIV模块级别高于下面的DIV模版级别.所以,我们在position:relative;中可以体会到是上一层遮住了下一层.并且遮住了我们设定的20象素的区域.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航