CSS 相对布局

前面学习过CSS 的FlexBox布局，很大一部分页面基本都能实现了。不过昨天在练习封装一个Banner组件（虽然小程序提供了swiper）的时候，发现FlexBox无法满足需求，了解了一下可以用position来解决。效果如下：

相对.png

对于一般块级元素，拿div来讲，在页面中独占一行，自上而下排列，也就是传说中的流。而即使是flex布局，也只是在横轴或纵轴上流式布局，而上图中一个div在另一个div上是没有办法满足的。

对于Position，其有四个属性值：

• static ：默认值。没有定位，元素出现在正常的流中（top，right，bottom，left等属性无效）。

• relative ： 生成相对定位的元素，相对于元素本身正常位置进行定位。

• absolute ：生成绝对定位的元素，相对于static定位以外的第一个祖元素进行定位，通过left、top、right、bottom属性进行规定。

• fixed ：生成决定定位的元素，相对于浏览器的窗口进行定位。也是通过left、right、top、bottom属性进行规定。

CSS有三种基本的定位机制：普通流，浮动和决定定位

• 普通流：默认定位方式，元素position属性为static或继承来的static。

• 相对定位：对于position属性的relative值，使用相对定位时，无论元素是否移动，元素在文档流中占据的原来空间，只是表现会改变。

• 绝对定位：绝对定位元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素一样不存在。 绝对定位的元素的位置是相对于距离他最近的非static祖先元素位置决定的。

• 固定定位：固定定位的元素也不包含在普通的文档流中

• 浮动：浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。

多个浮动存在时，会按照流的方式规则排列

image.png
image.png
image.png

行框和清理：
前面说浮动元素会脱离文档流，不会影响不浮动的元素。不过如果浮动的元素后面有一个文档流中元素，那么这个元素的框会表现的像浮动元素不存在，但是框的文本内容会受到浮动元素的影响，会移动以留出空间。

使用clear属性，可以组织行框围绕在浮动元素外边，属性的left、right、both、none表示框的哪些边不挨着浮动框。

不浮动
浮动
移除浮动