文档流

[linkingstar]

文档流

定位（基本文档流）

正常的布局流采用从上到下的垂直布局方式 仅仅针对block元素

对于内联元素，他们会出现在同一行，如果超出宽度则会自动换行

如果相邻的两个元素都存在外边距，则会保留两个外边距中较大的一个，这被称之为外边距折叠

// 使用margin 0 auto可以实现水平居中，前提是要指定宽度
body {
  width: 500px;
  margin: 0 auto;
}

介绍定位

为了覆盖上方的基本定位逻辑，引入了定位。

静态定位

静态定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位置

相对定位

让元素偏离它在文档流中原始的位置

#id1 {
  position: relative;
	top:2px;
	left:2px
}

让id1偏离它原本位置，左侧2px，顶部2px

绝对定位

脱离文档流，一般用来进行弹窗等处理

定位上下文

如果找到包含绝对定位的元素，这取决于绝对定位元素的父元素的 position 属性。

如果所有的父元素都没有显式地定义position属性，那么所有的父元素默认情况下position属性都是static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在元素的外面，并且根据浏览器视口来定位。

如果我们对绝对定位的某一个父元素设置了position，那么该元素将作为绝对定位的容器，绝对定位元素将基于该元素来进行定位。

z-index

绝对定位可以让元素重叠，z-index是为了解决元素重叠之后，元素显示层级的问题，z-index越高，那么会显示在最顶层。

fixed定位

这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于元素或其最近的定位祖先，而fixed定位固定元素则是相对于浏览器视口本身。 这意味着您可以创建固定的有用的UI项目，如持久导航菜单。

sticky定位

该定位混合了相对定位已经绝对定位的特点，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。

参考文档