盒子的定位

最新推荐文章于 2023-06-02 10:59:13 发布

狗焕sama

最新推荐文章于 2023-06-02 10:59:13 发布

阅读量958

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_42376204/article/details/104656741

版权

14 篇文章 0 订阅

订阅专栏

在这里插入图片描述

三种机制的最后一种：定位

为什么要使用定位？：定位可以把盒子定在某一个位置，自由的漂浮在其他盒子（包括标准流和浮动）的上面，这样可以比标准流和浮动更加灵活的摆放位置。

在这里插入图片描述
定位=定位模式+边偏移。
偏移量表示的是元素对于其父元素边线的距离

定位的模式有下面这些：

在这里插入图片描述

静态定位（static）
相当于不用定位。基本不会使用。因为写了这句话相当于不用
相对定位（relative）
相对定位就是相对刚开始的定位，而且移动之后，其原来的位置还是会保存的。
即是：原来的标准流位置继续占有，后面的盒子仍然以标准流的方式对待它

正确情况下我们的子盒子是跟父元素的margin变化也会跟着产生位置的变化，但是我们给子元素加上absolute属性后，只会发生跟刚开始本来应该在的位置上的变化。
举例：
1.
在这里插入图片描述
此时效果为：

说明加上绝对路径是不会跟随父元素的变化而变化的，而是会跟原来的位置的距离来变化。

此时为：
在这里插入图片描述

<div class="father">
        <div class="damao"></div>
        <div class="ermao"></div>
</div>

在这里插入图片描述
此时效果为：

此时damao是绝对定位，因为父亲没有绝对定位。damao以浏览器文档为标准移动位置，此时我们看到，蓝色的ermao占据了本该是damao的位置，这说明了绝对定位是不占位置的！

我们应该使用子绝父相的方式来搭配使用

比如我们看到的这两个轮播图箭头，使用绝对位置可以保证绝对在父元素的左右位置，最重要的是其不占有位置，可以让图片压在它下面。父元素使用相对位置是可以更好的更改页面的布局，更重要的原因是相对位置其占有位置。其他元素还是会将它当作标准流来看待。更好避免不必要的麻烦。

固定定位可以算是绝对定位的一种。它具有以下特性：

在这里插入图片描述

绝对定位的盒子居中方法：

很多时候有必要的话可以让盒子会发生重叠现象，但是我们很难去让他们谁在最上面，谁次之，谁最后。此时我们通过z-index层叠等级属性即可调整盒子的堆叠顺序。z-index值越大，谁在上面，如果一样，则按照代码顺序
在这里插入图片描述

改变display可以通过三个方式：inline-block，float，绝对定位和固定定位
在这里插入图片描述

关注

专栏目录