登录
原创

定位小知识

发布于 2021-04-29 阅读 48
  • CSS
  • HTML
原创

定位叠放顺序:z-index

有几个盒子都是使用了定位,不做处理的话,默认后面的盒子会盖住前面的盒子,要自定义盒子的层叠排列顺序,可以用css的z-index属性

使用方法

z-index: 数值
eg:
z-index: 1;
z-index: 2;

没写的话默认是z-index: 0;
后面的数值越大,代表层叠权重越大,例如2的会压住1的,依次类推

不写z-index的盒子默认

代码示例1:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位练习</title>
    <style>
        .one {
            position: absolute;
            z-index: 3;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .two {
            position: absolute;
            z-index: 1;
            width: 200px;
            height: 200px;
            margin-top: 50px;
            margin-left: 50px;
            background-color: rgb(167, 235, 122);
        }
        
        .three {
            position: absolute;
            z-index: 2;
            width: 200px;
            height: 200px;
            margin-top: 100px;
            margin-left: 100px;
            background-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
</body>

</html>

未设置z-index时效果:
image.png
设置z-index后效果:
image.png

注意:定位的盒子加上z-index才有效

绝对定位的盒子居中算法

普通的盒子加上:margin: 0 auto 可以使其水平居中,但是如果给盒子加上了定位,再加margin: 0 auto就不能水平居中了
如下:
代码示例2:普通盒子加上:margin: 0 auto后水平居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位盒子居中练习</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果:
image.png

代码示例3:绝对定位盒子加上:margin: 0 auto后不能水平居中

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位盒子居中练习</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果:
image.png

绝对定位水平居中方法:

步骤一:让绝对定位的盒子先向右移动浏览器宽度的一半,即:left:50%
步骤二:让上面的盒子再向左移动盒子本身宽度的一半,例如:盒子宽度200px,则margin-left: -100px
代码示例4:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位盒子居中练习</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果:
image.png

绝对定位垂直居中方法:

步骤一:让绝对定位的盒子先向下移动浏览器高度的一半,即:top:50%
步骤二:让上面的盒子再向上移动盒子本身高度的一半,例如:盒子高度200px,则margin-top: -100px
代码示例5:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位盒子居中练习</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            left: 50%;
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

效果:
image.png

定位的特殊特性

绝对定位和固定定位也和浮动类似

1.行内元素添加绝对定位或者固定定位,可以直接设置高度和宽度。

行内元素默认大小是内容大小,没有处理的行内元素添加宽高是无效的,如下:

代码示例6:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位盒子的3种特殊性质</title>
    <style>
        span {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <span>今天天气真真好</span>
</body>

</html>

效果:
image.png

加了绝对定位/固定定位之后,可以添加宽高生效:

代码示例7:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位盒子的3种特殊性质</title>
    <style>
        span {
            /* position: absolute; */
            position: fixed;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <span>今天天气真真好</span>
</body>

</html>

效果:
image.png

尝试了下相对定位relative,设置宽高无效

2.块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容的大小。

代码示例8:普通块级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位盒子的3种特殊性质</title>
    <style>
        div {
            background-color: rgb(184, 169, 238);
        }
    </style>
</head>

<body>
    <div>人间值得</div>
</body>

</html>

效果:
image.png

代码示例9:加了绝对定位的块级元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位盒子的3种特殊性质</title>
    <style>
        div {
            position: absolute;
            background-color: rgb(184, 169, 238);
        }
    </style>
</head>

<body>
    <div>人间值得</div>
</body>

</html>

效果:
image.png

3.脱标的盒子不会触发外边距塌陷

普通盒子,子盒子设置外边距,父盒子会跟着吊下来:
代码示例10:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .son {
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: rgb(164, 100, 237);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

效果:
image.png

加上绝对定位/固定定位后,不会塌陷下来:
代码示例11:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <style>
        .father {
            /* position: absolute; */
            position: fixed;
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        
        .son {
            margin-top: 50px;
            width: 200px;
            height: 200px;
            background-color: rgb(164, 100, 237);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

效果:
image.png

评论区

零00
1粉丝

时光荏苒,我自清欢

0

0

0

举报