一、绝对定位
当元素的 position 属性值设置为 absolute 时，则开启了元素的绝对定位。
创建 HTML 页面，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
strong {
position: absolute;
}
</style>
</head>
<body>
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/juejin.png" alt="">
<div>我是div元素</div>
</body>
</html>
在浏览器中打开 HTML 页面，具体效果如下：
绝对定位是脱离标准流的，可以通过 left/right/top/bottom 进行定位，定位的参照对象是最临近的定位祖先元素，如果找不到这样的祖先元素，参照对象是视口。
定位元素 就是 position 不为 static 的元素，也就是 position 的值可以为 relative/absolute/fixed 元素。
上述代码中 strong 最临近的元素的祖先的元素就是 html，但是 html 不是一个定位元素。
添加如下 CSS 样式：
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
right: 0;
top: 0;
}
刷新页面，效果如下：
修改该 HTML 代码的结构，给它们增加一个 div.box 父元素，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 800px;
height: 400px;
background-color: #0f0;
}
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
/* right: 0;*/
/* top: 0; */
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/juejin.png" alt="">
<div>我是div元素</div>
</div>
</body>
</html>
刷新页面，效果如下：
给 strong 元素设置偏移量，具体代码如下：
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
right: 0;
top: 0;
}
刷新页面，效果如下：
此时 strong 元素定位的参考对象并不是 div.box，因为它不是定位元素，但是我们可以通过 position 属性将 div.box 设置为一个定位元素，具体代码如下：
.box {
width: 800px;
height: 400px;
background-color: #0f0;
position: fixed;
}
刷新 HTML 页面，效果如下：
此时 span 元素的定位相对的就是相邻元素的祖先定位元素 div.box。
我们可以给 div 外面再嵌套一层，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 1000px;
height: 500px;
background-color: #f00;
}
.box {
width: 800px;
height: 400px;
background-color: #0f0;
position: fixed;
}
strong {
position: absolute;
/*没有祖先元素的情况下相对的是视口*/
right: 0;
top: 0;
}
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<span>我是span元素</span>
<strong>我是strong元素</strong>
<img src="../images/juejin.png" alt="">
<div>我是div元素</div>
</div>
</div>
</body>
</html>
刷新页面，效果如下：
将 div.box 中的定位设置删除并在 div.container 中设置定位信息，具体 CSS 代码如下：
.container {
width: 1000px;
height: 500px;
background-color: #f00;
position: fixed;
}
.box {
width: 800px;
height: 400px;
background-color: #0f0;
}
刷新页面，效果如下：
此时 span 元素定位的相对的是 div.container，以为它是 span 元素的相邻元素的最先定位元素，而 div.box 是相邻元素的祖先元素，但不是定位元素，因此不再相对它。
修改定位方式从 fixed 修改为 relative，具体代码如下：
.container {
width: 1000px;
height: 500px;
background-color: #f00;
position: relative;
}
再次刷新页面，效果如下：
当 div.container 和 div.box 都设置为定位元素时，span 相对的是离自己最近的相邻元素的祖先定位元素，显然 div.box 离得更近，将 CSS 代码修改为如下形式：
.container {
width: 1000px;
height: 500px;
background-color: #f00;
position: relative;
}
.box {
width: 800px;
height: 400px;
background-color: #0f0;
position: relative;
}
刷新页面，效果如下：
绝对定位的特点：
- 开启绝对定位后，如果不设置偏移量元素的位置不会发生变化。
- 开启绝对定位后，元素会从文档流中脱离。
- 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开。
- 绝对定位会使元素提升一个层级。
- 绝对定位元素是相对于其包含块进行定位的。
