position定位的属性和属性值

叶不休

于 2024-07-15 16:56:18 发布

阅读量162

点赞数 5

分类专栏：前端文章标签： css css3 前端 html html5 chrome

本文链接：https://blog.csdn.net/weixin_58694594/article/details/134191855

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

1.position:static;静态定位（默认的）

2.position:absolute;绝对定位

<!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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 200px;
            height: 200px;
            background: yellow;
            position: absolute;
            top: 100px;
            left: 100px;
        }
        
    </style>
</head>
<body>
    <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus quos nobis reiciendis possimus quaerat aut sed in, suscipit natus fugiat animi ratione unde numquam dignissimos earum omnis aperiam modi. Provident?</div>
    <div class="box1"></div>

</body>
</html>

父绝子相

<!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>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background: yellow;
            margin: 0 auto;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: red;
            left: 100px;
            top: 100px;
            position: absolute;
        }
        
    </style>
</head>
<body>
    <!-- 父绝子相 -->
    <div class="box">
        <div class="box2"></div>
    </div>
</body>
</html>

3.position:relative;相对定位

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: red;
        }
        .box2{
            background: blue;
            position: relative;
            top: 100px;
            left: 100px;
        }
        .box3{
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

4.position:fixed;固定定位（适合广告）

<!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>Document</title>
    <link rel="stylesheet" href="/kerwin/font/支付宝弹性盒案例/font_4557545_nwtp793wdog/iconfont.css">
    <style>
        .box{
            width: 100%;
            height: 2000px;
            background: blue;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: yellow;
            position:fixed;
            right: 0;
            bottom: 400px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

效果如图：

5.position:sticky;粘性定位

像这种的鼠标往下滑中间的这个栏固定在这里就是粘性定位

记得要设置top值

<!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>Document</title>
    <style>
        .header{
            background: yellow;
            width: 100%;
            height: 100px;
        }
        .nay{
            background: red;
            width: 500px;
            height: 100px;
            margin: 0 auto;
            /* 粘性定位 */
            position: sticky;
            top: 0px;
        }
        .body{
            height: 1000px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nay"></div>
    <div class="body"></div>
</body>
</html>

6.定位里的层级

两个div并列关系，z-index的值谁大谁在上面

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: brown;
            position: relative;
            top: 100px;
            left: 100px;
            z-index: 1;
            /* z-index 默认是0，谁大谁就在上面 */
        }
        .box2{
            background-color: yellow;
            position: relative;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

父子关系

<!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>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: relative;
        }

        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: -1
        }
    </style>
</head>
<body>
    <!-- 盒子是父子关系 -->
    <div class="box">
        <div class="child"></div>
    </div>
</body>
</html>

z-index设置成-1