如何用绝对定位（position:absolute）完美定位布局及其注意事项
一、前言
在《Vue进阶（幺肆贰）：CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解》一文中，讲解了CSS常用的几种定位方式。此博文主要讲解如何应用绝对定位实现完美布局，及应用注意事项。
在布局过程中我们经常用到绝对定位，很多初学者在一开始用绝对定位经常会达不到预期的效果，因为它们往往会忽略使用绝对定位的两个条件。
什么？使用绝对定位还要条件？
当然要啦！代码又没有脑子，没法自己思考应该定位到哪里。为了使用的时候方便，使用绝对定位的时候要满足两个条件。
在讲这两个条件的之前，我们要先提一个重要概念：标准流。
二、标准流
什么是标准流呢？
标准流（normal flow），也被称为文档流，是指在不借助任何特殊的css排列规则元素。
2.1 排布规则
浮动和定位（absolute，fixed）会脱离标准流，也就是不受这套规则的约束。
标准流其实就是一个默认的排布规则。下面介绍一下标准流元素的一些排布规则：
- 标准流中的块级元素（
block）
- 块级元素独占一行，垂直方向上从上往下进行排列；
- 块级元素可设宽高；
- 块级元素不设宽度的情况下,默认宽度为其父级的100%；
- 标准流中的行内元素(
inline)
- 行内元素将与其他行内元素从左到右进行排列；
- 行内元素不可设置宽高,由其内容决定其宽高；
- 特殊的行内元素
input与img是行内元素，但是可以设置宽高；
- 标准流中的嵌套规则
- 块级元素可以嵌套行内元素，反之不能；
ul（无序列表）,ol（有序列表）只能嵌套li，li可以嵌套任何元素；dl（定义列表）只能嵌套dt（标题），dd（标题解释）元素；textarea里只能嵌套文本；p,h1~h6只能嵌套文本和行内元素；select（表单控件）只能嵌套option；a标签不可以嵌套交互型的标签；
- 外边距合并问题
标准流中上下相邻两个元素的
margin-bottom与margin-top会发生重叠情况。
2.2. display属性
display 属性可以设置元素外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现。
注意⚠️：设置块级元素的外部显示类型display：inline;不是把块级元素变成了内联元素，它本身还是块级元素，只是它具备了内联元素的显示特点。
那么外部显示类型display: inline-block; 的显示特点是什么呢？从名字上看，它应该是具备了块级和内联元素的特点，没错，它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点。
2.2.1 display: inline 代码及显示效果
一些常见的行内元素包括 <span>、<a>、<img>、<button>、<input> 等。
这里使用内联元素span，其display默认值是inline。因此，不需要显示指定该值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: inline</title>
<style>
span {
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>Hello HTML</span>
<span>Hello HTML</span>
<span>Hello HTML</span>
</div>
</body>
</html>
如图所示，满足了内联元素的特点：多个元素在一行显示，设置属性：width、height、margin-top、margin-bottom无效。
2.2.2 display: block 代码及显示效果
一些常见的块级元素包括 <div>、<p>、<h1> 到 <h6>、<form> 等。
仅仅将span替换为p元素，样式设置没变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: block</title>
<style>
p {
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>hello HTML</p>
<p>hello HTML</p>
<p>hello HTML</p>
</div>
</body>
</html>
如图所示，满足了块级元素的特点：每个元素独占一行，设置属性：width、height、margin-top、margin-bottom生效。
2.2.3 display: inline-block 用于内联元素
对span元素的样式添加display: inline-block。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display: inline</title>
<style>
span {
/*添加display: inline-block;*/
display: inline-block;
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
background-color: red;
}
div {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<span>Hello HTML</span>
<span>Hello HTML</span>
<span>Hello HTML</span>
</div>
</body>
</html>
如图所示：它结和了块级元素：可以设置属性：width、height、margin-top和margin 和内联元素：多个元素在一行显示的特点。
看了上面的一些排布规则，大家是不是就了解什么叫标准流啦？
举个例子，就拿float来说，没有浮动的盒子是一个标准流，而浮动的盒子是一个非标准流 ，因为float更改了它默认的排布规则。
而我们要用到的绝对定位，则是对离自己最近的那个非标准流盒子而言的。 （对一个盒子使用了浮动，相对定位，或者绝对定位，那么这个盒子就变成了一个非标准流的盒子。）
好了，接下来就该讲使用绝对定位要满足的两个条件了。
当我们要使用绝对定位的时候，必须要有两个条件：
- 必须给父元素加定位属性，一般建议使用
position:relative(即：将父元素设置为相对定位);- 给子元素，加绝对定位
position:absolute（将子元素设置为绝对定位）; 同时加方向属性（top,left,right,bottom）
为什么要满足这两个条件呢？
因为绝对定位是以父元素为基准点，进行定位。如果他没有父元素，或者它的父元素没有设置position:relative属性它就会以最近的非标准流盒子为基准点进行定位。
绝对定位会使当前元素脱离文档流，即变成了非标准流。这是什么意思呢？
其实，当它为标准流的时候，它默认在原位，当它脱离标准流的时候，他就浮动起来了，不再占据原来的位置了。
这时候你要是想定位，如果不将它的父元素设置为相对定位（即让父元素变为非标准流），或者它没有父元素，那么它就会以<html>节点的顶部为基准定位。
如果满足了这两个条件，它就将会以父元素为基准进行绝对定位。
这样定位的话，会省去很多麻烦。
三、Demo
下面来看一下具体例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h3{
position:absolute;
left:50px;
top:50px;
color:#FFF;
}
.div_test{
width:500px;
height:200px;
background-color:#000;
}
.div_test2{
width:300px;
height:100px;
float:right;
background-color:blue;
//position:relative;//相对定位
}
</style>
</head>
<body>
<div class="div_test">
<div class="div_test2">
<h3>这是一个绝对定位了的标题</h3>
</div>
</div>
</body>
</html>
上面的代码定义了一个大div，其包含一个小div，小div中使用了绝对定位。按照以上代码实现逻辑，是想实现文字根据div_test2来定位，但是运行一下，如图：
可以看到，这段文字根据<html>节点顶部作为基准定位。这是因为它的父元素没有设置相对定位。
现在给它的父元素设置一下相对定位。
四、拓展阅读
- 点赞
- 收藏
- 关注作者
评论（0）