CSS入门(定位的简单总结)

一、定位

普通流定位
浮动定位
相对定位
绝对定位
固定定位

二、position定位

1.static（默认值）
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位

图层概念：
z-index：调整元素的图层
注意：只有使用在相对定位绝对定位固定定位上浮动并不能使用
只能用在同级的标签上不能用在父级和层级关系的标签中子级永远是覆盖父级的

①、相对定位

偏移属性改变元素在页面上的位置（移动元素）
top
left
right
bottom

相对定位：元素会相对原来的位置偏移到某个地方，原本的位置依然会保留相对元素原来位置的左上角进行位置偏移的
使用场合：元素位置的微调

②、绝对定位

绝对定位的元素会脱离文档流相对于body进行位置偏移
注意：一旦我们给元素设置了绝对定位之后就具有的漂浮的效果

③、固定定位

固定定位：一旦写上了固定定位之后，元素就具有漂浮的效果并脱离文档流不受我们滚动条的影响
跟随body标签的左上角进行位置偏移的

④、绝对定位和相对定位的结合使用

1.在要偏移的元素的父级元素里面添加相对定位
2.在该元素里添加绝对定位

各种定位的使用场合
多个块级元素现在要在一行内显示用浮动
元素要实现自身位置的微调的时候用相对定位
实现弹出内容时（或者排版）用绝对定位和相对定位的结合使用
顶部固定左边导航固定广告固定定位

巴特西