CSS定位

WFIT~SKY

于 2024-10-08 10:15:40 发布

阅读量194

点赞数 7

分类专栏：大前端文章标签：前端 CSS CSS3 CSS定位

本文链接：https://blog.csdn.net/lv_soso/article/details/142752872

版权

大前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

作用：灵活的改变盒子在网页中的位置。

实现：

定位模式：position
边偏移：设置盒子的位置（left、right、top、bottom）

1. 相对定位

属性：position : relative

用法：相对定位一般不单独使用，与其它定位方式配合使用。

特点：

不脱标，占位。
参照物，改变位置的参照物是自己原来的位置。
显示模式，标签显示模式特变不变。

<style>
    div {
        position: relative;
        left: 100px;
    }
</style>

2. 绝对定位

属性：position : absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

脱标，不占位置。
参照物，先找最近的已经定位的父元素；否则参照浏览器。
显示模式，绝对定位显示模式特点具备行内块特点。

<style>
    div {
        position: relative;
    }
    div span {
        position: absolute;
        top: 10px;
        left: 10px;
    }
</style>

3. 固定定位

属性：position : fixed

场景：元素的位置在网页滚动时不会改变。

特点：

脱标，不占位。
参照物，浏览器的窗口。
显示模式，具备行内块特点。

4. 定位居中

实现步骤：

绝对定位
水平、垂直边偏移为50%
了解：子级向左、上移动自身尺寸的一半（为负尺寸）
推荐：transform : translate(-50%,-50%)

<style>
    img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>

5. 堆叠层级

默认效果：按照标签书写顺序，后来者居上。

作用：设置定位元素的层级顺序，改变定位元素的显示顺序。

属性：z-index : 整数（默认是0，取值越大显示顺序越靠上）。

<html>
<head>
    <title>定位</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: pink;
            z-index: 2;
        }
        .box2 {
            background-color: green;
            left: 100px;
            top: 100px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>