CSS：定位（定位的疊放次序、定位的特性）

時間 2020-06-25 標籤 css 定位次序特性

一、定位的疊放次序（只有定位的盒子才擁有這個屬性）css

（1）在使用定位佈局的時候，可能會出現盒子重疊的狀況，此時，能夠使用z-index來控制盒子的先後次序。該屬性的值能夠是正整數、負整數或0，默認是auto，數值越大，盒子越靠上html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: yellow;
                z-index: 5;
            }
            .test2 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: red;
                z-index: 3;
            }
            .test3 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: black;
                z-index: -1;
            }
        </style>
    </head>

    <body>
        <div class="test1"></div>
        <div class="test2"></div>
        <div class="test3"></div>
        
    </body>
</html>

（2）若是盒子的z-index屬性的值相等，那麼後來者居上瀏覽器

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
            .test2 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: red;
            }
            .test3 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: black;
            }
        </style>
    </head>

    <body>
        <div class="test1"></div>
        <div class="test2"></div>
        <div class="test3"></div>
        
    </body>
</html>

二、絕對定位的盒子水平居中佈局

加了絕對定位的盒子不能經過margin :0 auto水平居中spa

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                position: absolute;
                left: 50%;
                margin-left: -100px;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
    </body>
</html>

先將盒子的左側調整到瀏覽器的中間位置，而後再向左側移動盒子寬度的一半code

三、定位的特性htm

（1）絕對定位和浮動相似，行內元素添加絕對定位或固定定位後就能夠直接設置高度或寬度blog

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: yellow;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
    </body>
</html>

（2）塊級元素添加絕對定位或固定定位，若是不設置高度或寬度，默認大小是內容的大小圖片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                position: absolute;
                background-color: yellow;
            }
    
        </style>
    </head>

    <body>
        <div class="test1">你好</div>    
    </body>
</html>

（3）浮動的元素只會壓住標準流的盒子，可是不會壓住標準流裏盒子的文字或圖片，可是絕對定位或固定定位會壓住標準流的全部內容utf-8

浮動：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                float: left;
                background-color: yellow;
                width: 200px;
                height: 200px;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
        <p>早上好，今天是星期一</p>
    </body>
</html>

定位：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>test</title>
        <style type="text/css">
            .test1 {
                position: absolute;
                background-color: yellow;
                width: 200px;
                height: 200px;
            }
    
        </style>
    </head>

    <body>
        <div class="test1"></div>    
        <p>早上好，今天是星期一..................</p>
    </body>
</html>