05-css定位

1.了解流的概念：

• 文档流是相对于盒子模型讲的
• 文本流是相对于文子段落讲的
• 元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时， 其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域， 围绕它布局，也就是没有拖出文本流。 但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。 那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。 当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。

2.了解CSS定位的概念：

• CSS 定位属性允许对元素进行定位改变其在页面的位置。
• CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
• 普通流中的元素的位置由元素在HTML中的位置决定。

3.CSS相对定位(position:relative)

1. 相对定位，如果没有偏移量（left/right/top/bottom）就是正常显示；
2. 根据原来的位置进行偏移
3. 不会使元素脱离文档流

4.绝对定位 (position:absolute)

• 如果使用绝对定位，有定位祖先元素就相对于定位祖先元素发生偏移， 没有定位祖先元素就会相对于整个文档发生偏移（绝对 相对 固定）
• 使元素脱离文档流

5.固定定位 (position:fixed)

• 相对于整个窗口进行定位，不会受滚动条影响
• 使元素脱离文档流

6.粘性定位sticky：

(这是css3新增的属性值)粘性定位。最初会被当作是relative，相对于原来的位置进行偏移； 一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。

position:sticky ，其支持还不是很普遍。

7.z-index 设置元素的堆叠顺序:

 

练习：选项卡案例（应用z-index）

鼠标悬浮在哇咔咔、太棒了、纳尼、不要听等选项上下面会出现对应的照片