CSS基礎學生11-CSS用z-index進行層次堆疊


所有CSS基礎學習文檔下載地址:http://download.csdn.net/detail/rongrong_love_lc/9663463

十一、CSS用z-index進行層次堆疊
CSS可以處理高度、寬度、深度三個維度。
value:z-index:數字[數字較大的元素將疊加在數字較小的元素之上]
html文件如下:
<html>
<head>
<title>Color例子</title>
<link rel="stylesheet" type="text/css" href="color.css"/>
</head>
<body>
<div >
<img id="box1" src="image1.jpg" alt="imag1" />
<img id="box2" src="image2.jpg" alt="imag2" />
<img id="box3" src="image3.png" alt="imag3" />
</div>
</body>
</html>
CSS文件如下:
#box1{position:absolute;
top:20px;
left:50px;
color:blue;
z-index:1;
}
#box2 {color:red;
position:absolute;
top:140px;
left:70px;
z-index:2;
}
#box3 {color:red;
position:absolute;
top:180px;
left:90px;
z-index:3;
}

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com