css定位深度理解

一枕槐安1

于 2022-11-12 11:27:50 发布

阅读量156

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_64770583/article/details/127781718

版权

css中五种定位方式（position属性）

静态定位（position：static；）

静态定位：就是默认的定位方式，元素按照文档流规则排列，块级元素独占行，内联元素同行显示。元素

相对定位（position：relative；）

相对定位：相对于原来文档流中的位置，进行位置调整，不会脱离文档流，依旧支撑父元素高度。

如下图，绿色盒子设置了相对定位，左移150px

position：relative：

left：150px；

距离原来位置左边框150像素

设置了相对定位，会覆盖文档流的元素，如下图

position：relative；

top：50px；（距离原来位置顶部50px）

绝对定位（position：absolute；）

绝对定位：脱离文档流，不占布局空间

定位原点——离自己最近的具有非静态定位属性的祖先元素，如果没有，一直找到html根元素

没有使用绝对定位之前：

（为了方便容易分辨，我给父元素设置了margin外间距，给html设置了一个背景色pink ）

给绿色块设置绝对定位 position：absolute；但是不写位置信息

！！！这个时候绿色虽然脱离了文档流，但是并没有去找定位原点，还是在父元素里面

这时候我们设置位置信息，设置一个top：0；这时候绿块的位置已经不再以父元素为定位原点，

而是去找非静态定位属性的祖先元素，以为没有把其他元素设置为非静态，所以一直找到html根元素，但是left的位置，还是相对于父元素，如果这时候我们再添加left：0；如右图：

一般子元素使用的绝对定位的时候，就会给直接父元素添加相对定位。这就是常说的子绝父相

当然不给父元素设置相对定位也是可以的，因为找的是非静态（static）的都可以，除了static其他（relative、absolute、fixed、sticky）都是可以滴！

绝对定位实现子元素在父元素中水平垂直居中

给父元素设置相对定位，给子元素设置绝对定位，然后上下左右四个方向都为0，最后设置margin：auto；实现空间平均分配。

<style>
/*****清除自带的样式 ******/
    * {
        margin: 0;
        padding: 0;
    }
/***** 父元素设置一个相对定位  ****/
    .box {
        width: 300px;
        height: 300px;
        background-color: lawngreen;
        position: relative;
    }
/******子元素设置绝对定位********/
    .box .z {
        width: 100px;
        height: 100px;
        background-color: lightseagreen;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
</style>

<body>
//父元素
    <div class="box">
//子元素
        <div class="z"></div>
    </div>
</body>

固定定位（position：fixed）

特点：1.固定定位是元素固定在浏览器可视区的位置，浏览器页面滚动时，元素位置不会发生变动

2.跟父元素的位置没有关系

3.脱离文档流，释放布局空间

4.可以使用margin、padding调整位置

一直固定在浏览器的某个位置

固定定位小应用屏幕遮罩层

/*****固定定位的那个盒子*****/
<style>
.box {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.5);
    }
</style>