CSS典型案例实践

发布时间：2015-12-17 20:00:08

CSS案例实践一、层布局：定位元素重叠在CSS中可以通过z-index属性来确定定位元素的层叠等级。需要注意的是：z-index属性只有在元素的position属性取值为relative、absolute或fixed时才可以使用。在z-index属性中，其值越大层叠级别就越高，如 ...

CSS案例实践

一、层布局：定位元素重叠

在CSS中可以通过z-index属性来确定定位元素的层叠等级。需要注意的是：

z-index属性只有在元素的position属性取值为relative、absolute或fixed时才可以使用。
在z-index属性中，其值越大层叠级别就越高，如果两个绝对定位的元素的该属性具有相同的number值，那么将依据它们在HTML文档中声明的顺序层叠。
z-index属性只能在同一级别的HTML上体现作用
对于未指定此属性的绝对定位元素，可以看做值为auto,即自动设置，一般会根据父元素的定位进行确定；
对于未指定此属性的绝对定位元素，此属性的number值为正数的元素会在其之上，为负数则在其之下。

eg：

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4   <meta charset="UTF-8"> 5   <title>定位元素层叠</title> 6   <style type="text/css"> 7     body{ 8       margin: 0; 9       padding: 0;;10     }11     #contain1{12       position: absolute;13       z-index: 10;14       width: 200px;15       height: 200px;16       background-color: #5d63fa;17     }18     #contain2{19       position: absolute;20       z-index: 1;21       width: 200px;22       height: 200px;23       background-color: brown;24       left: 30px;25       top:30px;26     }27   </style>28 </head>29 <body>30   <div id="contain1"></div>31   <div id="contain2"></div>32 </body>33 </html>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com