这是我参与「4月日新计划更文活动」的第6天。
接着上面的文章，我们今天讲一下定位布局。
话不多说，我们来看看定位布局有哪些属性和对应属性的使用方法吧。
我们知道定位布局position有static、relative、absolute、fixed、inherit和sticky这些属性。
默认属性是static。
但是我们常用的属性值是：relative、absolute、fixed。
那这些属性分别是什么意思呢？
static表示元素处于正常的文档流中。
relative指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
absolute指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
第一种：设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
第二种：如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
fixed指相对于body定位的，并且不会随着文档的滚动，而发生位置的变化。
以下我写一个相对定位和绝对定位页面的例子展示。
代码如下：
<!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" />
<meta name="keywords" contect="web前端 | 技术文章" />
<meta name="description" contect="写web前端技术文章的地方" />
<meta name="author" contect="写前端的小北" />
<title>相对定位和绝对定位</title>
</head>
<style>
.container{
width: 300px;
height: 300px;
background: green;
position: relative;
left: 100px;
top: 100px;
}
.box{
width: 100px;
height: 100px;
background: orange;
position: absolute;
left: 50px;
top: 50px;
}
</style>
<body>
<h3>写一个定位的例子</h3>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
这里的父元素container相对于body进行了相对定位，对于左侧left的偏移值是100px，上侧的偏移值是100px。
子元素box相对于父元素container进行绝对定位，对于左侧left的偏移值是50px，上侧的偏移值是50px。
看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。
