1.了解流的概念:
- 文档流是相对于盒子模型讲的
- 文本流是相对于文子段落讲的
- 元素浮动之后,会让它跳出文档流,也就是说当它后面还有元素时, 其他元素会无视它所占据了的区域,直接在它身下布局。但是文字却会认同浮动元素所占据的区域, 围绕它布局,也就是没有拖出文本流。 但是绝对定位后,不仅元素盒子会拖出文档流,文字也会出文本流。 那么后面元素的文本就不会在认同它的区域位置,会直接在它后面布局,不会在环绕。 当然你可以使用 index-z 来让底部的元素到上面来,类似于一个图层的概念。
2.了解CSS定位的概念:
- CSS 定位属性允许对元素进行定位改变其在页面的位置。
- CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
- 普通流中的元素的位置由元素在HTML中的位置决定。
3.CSS相对定位(position:relative)
- 相对定位,如果没有偏移量(left/right/top/bottom)就是正常显示;
- 根据原来的位置进行偏移
- 不会使元素脱离文档流
4.绝对定位 (position:absolute)
- 如果使用绝对定位,有定位祖先元素就相对于定位祖先元素发生偏移, 没有定位祖先元素就会相对于整个文档发生偏移(绝对 相对 固定)
- 使元素脱离文档流
5.固定定位 (position:fixed)
- 相对于整个窗口进行定位,不会受滚动条影响
- 使元素脱离文档流
6.粘性定位sticky:
(这是css3新增的属性值)粘性定位。最初会被当作是relative,相对于原来的位置进行偏移; 一旦超过一定阈值之后,会被当成fixed定位,相对于视口进行定位。
position:sticky ,其支持还不是很普遍。
7.z-index 设置元素的堆叠顺序:
练习:选项卡案例(应用z-index)
鼠标悬浮在哇咔咔、太棒了、纳尼、不要听等选项上下面会出现对应的照片