传统的布局解决方案
display属性 +position属性 +float属性 +z-index属性
关于 display
在配置页面布局中 display 是非常重要的一个属性，它的值表示了元素在页面中的表现形式；在HTML中默认的display属性取决于HTML规范所描述的行为或浏览器/用户的默认样式表，大部分元素的display属性，预设值通常是 block或inline其中一个。
关于 display 的值，这里有详细的列表。
-
div是一个标准的block元素； -
span是一个标准的inline元素； -
none可以隐藏元素时期不显示；
关于 position
CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和left 属性则决定了该元素的最终位置。
-
static
该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时top,right,bottom,left和z-index属性无效。 -
relative
该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。position:relative对table-*-group,table-row,table-column,table-cell,table-caption元素无效。 -
absolute
不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置margin，且不会与其他边距合并。绝对定位和float混用会使float失效。 -
fixed
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。
fixed属性会创建新的层叠上下文。当元素祖先的transform属性非none时，容器由视口改为该祖先。这儿有一篇文章！ -
sticky
盒位置根据正常流计算(这称为正常流动中的位置)，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为 table 时），该元素定位均不对后续元素造成影响。当元素 B 被粘性定位时，后续元素的位置仍按照 B 未定位时的位置来确定。position: sticky 对 table 元素的效果与 position: relative 相同。
红色盒子 position: sticky 效果图
关于 float
float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。
-
float元素的定位
当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。 -
clear清除浮动
元素向下移动清除之前的浮动，常见的值有left,right,both,none。
详见此页。 -
clearfix密技
在浮动的父元素上添加clearfix选择器。
详见此页。
.clearfix::after{
content: '';
display: block;
clear: both;
}
关于 z-index
当元素之间重叠的时候，z-order 决定哪一个元素覆盖在其余元素的上方显示。 通常来说 z-index 较大的元素会覆盖较小的一个。
网友评论