简介

可以使元素定位到相对于父元素或另一个元素甚至浏览器窗口本身的位置。

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素会单独占用一行。而span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

<div>
文本
<p>P元素</p>
</div>

定位分类

1.普通流

html默认的文档流，从上到下排列，一个块级元素占用一行，框之间的垂直距离是由框的垂直外边距计算出来，以此类推

2.相对定位

相对定位类似与Android中的relative布局方式，相对于元素在文档中的初始位置。

例如：原本是横向摆放3个元素，由于2元素使用了，相对定位后，脱离了文档流控制

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

执行后效果：

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其它框。

3.绝对定位

设置为绝对定位的元素框从文档流完全删除，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框，绝对定位是“相对于”父元素来定位的。

例如：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

执行后的效果：