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

一、定位

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

二、position定位

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

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

①、相对定位


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


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


②、绝对定位


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


③、固定定位


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


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


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


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

原文地址:https://www.cnblogs.com/MDZZZ/p/12049752.html