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>

相关文章
相关标签/搜索