CSS布局-定位以及层级关系_css 层级-优快云博客

本文链接：https://blog.youkuaiyun.com/NewHouser/article/details/127414196

这篇博客探讨了CSS中的定位技术，包括静态定位、相对定位、绝对定位（详细阐述了自绝父相的概念）和固定定位。同时，文章还提到了不同定位方式之间的层级关系，以及如何通过定位来实现元素的上下排列控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用于在网页中需要特定排版位置的元素使用，一般出现于有嵌套关系的盒子模型中。定位分为静态定位、相对定位、绝对定位、固定定位。

一、定位（position）的基本使用

1、静态定位

position:static; 浏览器的默认规则，即标准流，一般不用写

2、相对定位

position: relative; 通过left、top等方位属性，相对于自己原来的位置移动，未脱离标准流，任然占据原来的位置

position: relative;
top: 0;    //与顶部的距离
left: 0;    //与左边的距离

3、绝对定位

position: absolute; 通过方位属性，默认相对于浏览器可见区域移动，在父级有定位的情况下，相对于父级进行移动，脱离标准流，不占位置

position: absolute;
top: 0;
left: 0;

3.1、自绝父相

根据绝对定位的描述，相对与父级进行定位的情况，称之为自绝父相。为了满足自绝父相的条件，父级需要有定位，所以只要在父级添加position: relative; 即可。即子级元素绝对定位，父级元素相对定位。

代码示例（可全复制）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 相对定位 */
            position: relative;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .box1 {
            /* 绝对定位 */
            position: absolute;
            /* 方位属性 */
            top: 10px;
            left: 20px;
            background-color: red;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

代码效果：

常用的效果（正中心）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 相对定位 */
            position: relative;
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        
        .box1 {
            /* 绝对定位 */
            position: absolute;
            /* 方位属性,用百分比的方式 */
            top: 50%;
            left: 50%;
            /* 通过 transform 移动属性，让子元素处于父元素的正中心 */
            /* translate 移动值，括号内为xy轴*/
            transform: translate(-50%, -50%);
            background-color: red;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>
</body>

</html>

代码效果：