定位position

Coder_Haduo丶

于 2021-01-27 16:44:21 发布

阅读量70

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42781960/article/details/113202799

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

position：

static：默认值，元素值静止的没有开启定位
relative：开启元素相对定位
absolute：开启元素绝对定位
fixed：开启元素固定定位
sticky：开启元素的粘滞定位

相对定位

1.如果开启相对定位，但是不设置偏移量，元素不会发生任何变化
偏移量：offset，只有开启定位才可以用
（top，bottom一般只会选择一个使用，left，right一般只使用一个，left的优先级高于right ）

2.相对定位是参照文档流中的位置进行定位的，通俗点说，就是在不设置定位之前左上角的位置为原点

3.相对定位会提升元素的层次

4.相对定位不会使元素脱离文档流

5.不会改变元素的性质，比如：行内元素，块元素这些属性

绝对定位

绝对定位的坐标原点：此元素的祖先之中，挨得最近的，定位是relative的祖先元素的原点，如果没有的话，就按照网页的左上角作为原点

绝对定位开启之后，水平布局要满足：

left + margin-left + border-left + padding-left + width +
padding-right + border-right + margin-right + right = 父盒子内容宽度

可以设置auto的值：margin，width，left，right

垂直方向的布局：

top + margin-top/bottom +padding-top/bottom + height = 父盒子内容高度

绝对定位的一种水平垂直居中的方法：子绝父相——>margin：auto，auto；四个方向的偏移为0

***代码示例 ***

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>absolute</title>
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .box5{
            width: 300px;
            height: 300px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box4">4
        <div class="box5">5
            <div class="box2">2</div>
        </div>
    </div>
    
    <div class="box3">3</div>
</body>
</html>