position

Posted 2021-01-09 qwe123qwe

<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

static

按照正常的排版来排列网页元素：

网页根据先后顺序自动排版。

relativ

按照正常的排版来排列网页元素，但是可以相对他的基础值发生偏移：

 实现控制页面显示位置，根据你来美化你的网页显示。

absolute

会删除他该有的位置，他根据祖先来偏移定位置：

当网页中有需要置顶的声明等。

fixed

固定在视口来偏移   ：

主要运用广告

sticky

偏移相对于它的最近的祖先可以重叠：

 可以实现粘性布局将放不下的元素组合放在一起

如图片，文档等。