CSS 绝对定位 - 绿叶网

CSS 绝对定位简介

CSS 绝对定位是所有定位方式中使用最为广泛的，这是因为它能够很精确地把元素定位到任意你想要的位置。

一个元素变成了绝对定位元素，这个元素就完全脱离文档流了（注意是完全），绝对定位元素的前面、或后面的元素会认为这个元素并不存在，此时这个元素浮于其他元素上面，已经完全独立出来了。

在 CSS 中，我们可以使用 position: absolute; 来实现元素的绝对定位。

语法：

position: absolute;
top: 数值;
bottom: 数值;
left: 数值;
right: 数值;

说明：

position: absolute; 是结合 top、bottom、left 和 right 这 4 个属性一起使用的，其中 position: absolute 使得元素成为绝对定位元素，接着使用 top、bottom、left 和 right 这 4 个属性来设置元素相对浏览器的位置。

top、bottom、left 和 right 这 4 个属性不一定全部都用到，一般只会用到其中两个。默认情况下，这 4 个值的参考对象是浏览器的 4 条边。

注意: 在默认情况下，固定定位和绝对定位的位置是相对于浏览器而言，而相对定位的位置是相对原始位置而言。

示例 1：使用 CSS 绝对定位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #father {
            padding: 15px;
            background-color: teal;
            border: 1px solid silver;
        }
        #father div { 
            padding: 10px;
        }
        #son1 {
            background-color: orange;
        }
        #son2 {
            background-color: hotpink;
            /* 在这里添加 son2 的定位方式 */   
        }
        #son3 {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="son1">box1</div>
        <div id="son2">box2</div>
        <div id="son3">box3</div>
    </div>
</body>
</html>

页面效果如下图所示。

没有加入 CSS 绝对定位

分析：

我们为第 2 个 div 元素加入绝对定位，CSS 代码如下：

#son2 {
    background-color: hotpink;
    position: absolute;              /* 设置 son2 为绝对定位元素 */
    top: 20px;                       /* 距离包含块顶部 20 像素 */
    right: 40px;                     /* 距离包含块右侧 40 像素 */
}

再次运行后，页面效果如下图所示。

加入 CSS 绝对定位

分析：

从这个例子可以看出，绝对定位元素的 top 和 right 是相对于浏览器而言的。在绝对定位中，top、right、bottom、left 这 4 个属性，我们也是只需要其中两个属性就确定一个元素的相对位置。

CSS 3 种定位总结

在 CSS 中，对于固定定位、相对定位、绝对定位这 3 个，我们可以总结出以下几点。

默认情况下，固定定位元素和绝对定位元素的位置是相对于浏览器（body 元素）而言的，而相对定位元素的位置是相对原始位置而言的。这里注意一个前提——默认情况下。
position 属性一般配合 top、bottom、left 和 right 来使用。元素只有在定义 position 属性（除了 static）之后，top、bottom、left 和 right 才生效。
top、bottom、left 和 right 这 4 个属性不一定全部都用到，一般只会用到其中两个。
position: absolute; 会将元素转换为 block 元素。

子元素相对父元素定位

在 CSS 中，定位往往都是相对于浏览器或者原始位置而言的。但在实际开发中，我们经常要实现的是子元素相对于父元素来定位，那该怎么办呢？

语法：

父元素 {
    position:relative;
}

子元素 {
    position:absolute;
    /* 定义 top、bottom、left 和 right*/
}

说明：

想要实现子元素相对父元素定位，我们都是给父元素定义 position: relative，然后给子元素定义 position: absolute，之后配合 top、bottom、left 和 right 来定位。这个技巧在实际开发中会大量用到，也是定位布局的精髓之一，小伙伴们要重点掌握。

示例 2：子元素相对父元素定位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .father {
            position:relative;
            width:160px;
            height:20px;
            background-color:lightskyblue;
        }
        .son {
            position:absolute;
            bottom:-20px;
            left:70px;
            width:20px;
            height:20px;
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <div class="father">
        <span class="son"></span>
    </div>
</body>
</html>

页面效果如下图所示。

子元素相对父元素定位

分析：

使用上面这个技巧，我们可以把子元素随心所欲地相对父元素来定位。在这里我们注意一点，子元素没有使用 display: inline-block，但是却可以定义 width 和 height，为什么呢？其实这是因为 position: absolute 会将元素转换为 block 元素。这个也是绝对定位非常重要的一个特点。

浮动和定位都会将元素转换为 block 元素，我们一定要记住这一点。接下来，我们再来看一个复杂的例子：

示例 3：子元素相对父元素定位的应用

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .father {
            position:relative;
            width:160px;
            height:20px;
            float:left;
            margin-left:20px;	
            background-color:lightskyblue;
        }
        .son {
            position:absolute;
            bottom:-20px;
            left:70px;
            width:20px;
            height:20px;
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <div class="father">
        <span class="son"></span>
    </div>
    <div class="father">
        <span class="son"></span>
    </div>
    <div class="father">
        <span class="son"></span>
    </div>
</body>
</html>

页面效果如下图所示。

子元素相对父元素定位的应用

分析：

子元素相对父元素定位用途非常多，例如二级导航、微调元素位置等。像有些网站友情链接的图形效果，其实也是使用子元素相对父元素定位来实现的，下图所示。

CSS 绝对定位的应用

子元素相对祖先元素定位

前面例子都是子元素相对父元素来定位的，但想要实现子元素相对祖先元素（例如爷元素）定位，这个时候又该怎么做呢？

语法：

祖先元素 {
    position:relative;
}

子元素 {
    position:absolute;
     /* 定义 top、bottom、left 和 right*/
}

说明：

想要实现子元素相对祖先元素定位，我们都是给祖先元素定义 position: relative，然后给后代元素定义 position: absolute，之后配合 top、bottom、left 和 right 来定位。其实这个跟子元素相对于父元素定位是一样的道理。

示例 4：子元素相对祖先元素定位

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .grandfather {
            position:relative;   /* 设置相对定位 */
            width:200px;
            height:160px;
            background-color:lightskyblue;
        }
        .father {
            position:relative;   /* 设置相对定位 */
            width:120px;
            height:30px;
            background-color:orange;
        }
        .son {
            position:absolute;  /* 设置绝对定位 */
            bottom:-20px;
            right:50px;
            width:20px;
            height:20px;
            background-color:hotpink;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

页面效果如下图所示。

子元素相对祖先元素定位

分析：

小伙伴们可能就有疑问了： “奇怪了，为什么这里的子元素不是相对祖父元素来进行定位的，而还是相对于父元素来进行定位呢？预期的效果应该像下图这样才对啊！”

CSS 绝对定位预期效果图

这是因为虽然祖父元素定义了 position: relative，但是父元素也定义了 position: relative，因此子元素依旧是相对于父元素来定位的。我们在 CSS 中删除父元素 position: relative 这条属性之后，就可以发现子元素会相对于祖父元素来定位了。

绝对定位元素是相对于外层第一个设置了 position: relative、position: absolute 或 position: fixed 的祖先元素来进行定位的。这个规律极其重要，大家请好好琢磨这句话。

注意: 当多个绝对定位元素发生重叠时，我们可以使用 z-index 属性来控制它们的层叠顺序。z-index 属性的值越大，元素在层叠顺序中就越靠上。需要注意的是，z-index 属性只对已定位元素（即 position 属性值为 relative、absolute、fixed 或 sticky 的元素）有效。