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

一、定位

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

二、position定位

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

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

①、相对定位

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

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

②、绝对定位

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

③、固定定位

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

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

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

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