02-CSS基础与进阶-day9_2018-09-12-21-02-40

小鱼儿 2021-12-11 04:34 142阅读 0赞

定位  
静态定位 position: static  
相对定位 position: relative  
绝对定位 position: absolute 脱标 参考点  
子绝父相  
让绝对定位的盒子水平居中和垂直居中  
固定定位 position: fixed  
参考点 浏览器左上角  
固定定位的元素脱标不占有位置  
兼容性 ie6低版本不支持固定定位  
**z-index**  
 **当对多个元素设置定位时,重叠的定位元素可以通过z-index调整堆叠顺序 其值可以为0 正数 负数**  
 **特点 1 z-index默认值为0 取值越大 定位元素在层叠元素上越局上**  
 **2 z-index取值一样，后来居上**  
 **3 z-index值不能加单位**  
 **4 只有定位元素才有该属性，其余如浮动等都无此属性**

**04z-index.html**

**![1603260-20190623102814387-1585931411.png][]**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
           div {
         
                 width: 200px;
                 height: 200px;
                 position: absolute;
                 top: 0;
                 left: 0;
           }
    
           div:first-child {
         
                  background-color: red;
                  /* z-index: 1; */
           }
    
           div:nth-child(2) {
         
                 width: 300px;
                 top: 60px;
                 left: 20px;
                 background-color: purple; 
                 /* z-index: 2; */
                
           }
    
           div:last-child {
         
                 width: 400px;
                 left: 30px;
                 top: 40px;
                 background-color: orange; 
    
           }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
    </html>

转载于:https://www.cnblogs.com/HiJackykun/p/11072008.html

[1603260-20190623102814387-1585931411.png]: /images/20211211/fb83436f086349c8a95aef286bdca520.png