css定位

最新推荐文章于 2024-09-01 19:28:10 发布

咖啡杯里的茶1

最新推荐文章于 2024-09-01 19:28:10 发布

阅读量111

点赞数

分类专栏： # css 文章标签： css 定位

本文链接：https://blog.csdn.net/weixin_44600908/article/details/88384543

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一个元素的定位主要包含两个部分：元素的定位模式以及边偏移

边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于父元素上边线的距离
bottom	底部偏移量，定义元素相对于父元素下边线的距离
left	左侧偏移量，定义元素相对于父元素左边线的距离
right	右侧偏移量，定义元素相对于父元素右边线的距离

当我们使用定位时需要和这些偏移量一起使用，比如top:100px;

定位模式

在css中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值}

属性值	描述
static	自动定位(默认的方式)
relative	相对定位，相对于文档流的位置进行定位
absolute	决定定位，相对于上一个已经定位的元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位static

静态定位是我们没有写定位属性的时候的默认值，其唯一的作用就是清除定位。

相对定位relative

使用相对定位需要注意一下几点：

相对定位最重要的一点是它可以通过边偏移动位置，但是原来所占的位置继续占有。也就是相对定位还是在标准流中，并不会脱离原来的标准流。
每次移动的位置都是以自己左上角为基准移动(都是以自己已经所在的位置为参考系)

浮动的目的是为了让多个块级元素可以在一行显示，而定位的主要目的是为了可以让元素到我们想要的位置上面去。

绝对定位absolute

绝对定位有一下几点需要注意：

绝对定位与浮动一样，是在标准流当中不占位置的。
没有父元素定位时绝对定位是以当前屏幕为基准的。
如果父元素有定位，则是以最近的有定位的父元素(包含祖先元素)为基准

子绝父相

对于定位的搭配最好的方式是子元素使用绝对定位，父元素使用相对定位，简称子绝父相，不是说其他的搭配不可以，但是一般这种是最好的搭配方式。其根本原因是相对定位在标准流中占有位置，但是绝对定位时不占位置的，所以如果父元素使用决定定位，那么父元素在标准流中不占位置，这是不合理的。如果父元素使用相对定位，子元素也是使用相对定位那么父元素里面的内容会发生变化，比如很多页面左右滑动的那个三角形图标就是父元素里面的绝对定位元素，这样可以保证父元素里面其他的元素不受这个绝对元素的位置的影响。

固定定位fixed

固定定位于可以说是特殊的绝对定位，其用法与绝对定位类似，只是在绝对定位中有一条是如果父元素也有定位，那么含有绝对定位的子元素则是以最近1有定位的父元素为准，这一点与固定定位时不同的，含有固定定位的元素都是以屏幕为准的，即使父元素有定位也不会是以父元素为准。

定位的层级

如果有多个元素都是有定位的，那么这几个元素是会重叠的，后面的盒子是会盖住前面的盒子，如果想要让特定的盒子在上面那么可以使用z-index属性，该属性值越大。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .top {
            background-color: red;
            z-index: 1;
        }
        .center {
            background-color: green;
            margin: 20px;
        }
        .bottom {
            background-color: gray;
            margin: 40px;
        }
    </style>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>

在上面的例子中三个div都是绝对定位，所以是第三个div在最上面，因为都有定位的时候最后面的元素会覆盖前面的元素，但是如果在第一个div中加上了 **z-index: 1;**这个属性那么就是第一个div在最上面，z-index的属性值是一个数字，该数字可以当做是权重，数值越大权重越大，权重越大就会在越上面，这里只给了第一个div一个数字1，其余两个没有给，所以就是第一个div在最上面。