z-index的使用

一.如何让一个绝对定位的盒子居中

　　left : 50%;

　　margin-left : 宽的一半

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="header.css">
    <link rel="stylesheet" href="content.css"> -->
    <!-- <link rel="stylesheet" href="main.css"> -->
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            font-size: 14px;

        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        input{
            border: 0;
            outline: 0;
        }
        .father{
            width: 100%;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .box{
            width: 400px;
            height: 100px;
            background-color: green;
            position: absolute;

            /**/
            left: 50%;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>
</body>
</html>

二.固定定位

　　position : fixed;　　

特性:

　　1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

　　设置固定定位，用top描述。那么是以浏览器的左上角为参考点
　　如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            padding-top: 80px;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: red;
            /*脱离了标准文档流*/

            /*参考点：是以浏览器的左上角*/
            position: fixed;
            top:0;
            left: 0;
            z-index: 10000;

        }
        .active{
            position: relative;

        }
    </style>
</head>
<body>

    <div class="header"></div>

    <p>alex1</p>
    <p>alex2</p>
    <p>alex3</p>
    <p>alex4</p>
    <p>alex5</p>
    <p>alex6</p>
    <p>alex7</p>
    <p>alex8</p>
    <p>alex</p>
    <p>alex</p>
</body>
</html>

三.z-index的使用

扫描二维码关注公众号，回复： 3270952 查看本文章

特性:

　　1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
　　2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
　　3、z-index值没有单位，就是一个正整数，默认的z-index值为0，如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
　　4、从父现象：父亲怂了，儿子再牛逼也没用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father1{
            width: 300px;
            height: 300px;
            background-color: red;
            position:relative;
            z-index: 3;
        }
        .child1{
            width: 100px;
            height: 100px;
            background-color: purple;
            position: absolute;
            top: 280px;
            left: 350px;
            z-index: 20;

        }
        .father2{
            width: 300px;
            height: 300px;
            background-color: green;
            position:relative;
            z-index: 2;
        }
        .child2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            top: 0;
            left: 350px;
            z-index: 21;
        }
    </style>
</head>
<body>
    <div class="father1">
        <div class="child1"></div>
    </div>
    <div class="father2">
        <div class="child2"></div>
    </div>
    
</body>
</html

猜你喜欢