标签：foo sid evel 并且 查找 初始化 问题 产生 文档
子绝父相
position: relative;相对位置（常规流）
移动后还是只占原来位置
绝对定位：
position：absolute绝对位置
position：fixed固定位置
绝对定位的包含块：视口
起点是浏览器左上角开始进行位置偏移
注：如果没有给定4个方向的值，元素是在原有位置
特点：
会一直在视口进行显示
适用场景：
1、aside广告（左下）（右下）（左右侧边栏）
2、PC的header固定
3、移动footer的固定
产生问题：
脱离文档流后，原来位置不会继续占用，覆盖下面内容。
比如：
1、导航覆盖兄弟元素内容
2、两个绝对定位的元素相互覆盖
如何解决：
1、给被覆盖元素的上外边距
2、堆叠级别（设置谁在上，谁在下）
堆叠级别：（stack level）
他决定了元素谁显示在前谁显示在后
堆叠级别越高，显示在越前
z-index
绝对位置
如何确定包含块
1、查找最近的包含块当前标签的祖先元素，并且祖先元素的position属性不等于static
2、如果所有祖先元素，position都等于static，则包含块是初始化包含块，起点是视口左侧
常见错误：
如果只给了position的值，却没给4个方位的偏移量，当前元素不会去包含块的内容盒。
当absolute与fixed的包含块相同时，效果有什么区别？
拖动滚动条时，absolute会与内容进行移动，而fixed一直会在页面（视口）显示
当给定的方向值发生冲突时
列1：
left：0并且right：0 则left获胜
列2：
top：0并且bottom：0 则top获胜
使用场景：
两个或多个标签需要重叠展显时
比如
商店打折放到右上角
position:absolute
依次判断元素是否拥有position≠static的祖先元素，如果是，就是该元素的填充盒
依次判断元素是否拥有position=static的祖先元素，如果是，那就是初始化包含块
盒模型中的auto值
属性 绝对定位
margin-left：auto 0px
margin-right：auto 0px
margin-bottom：auto 0px
margin-top：auto 0px
width：auto 适应内容宽度
height：auto 适应内容高度
浮动
当元素的float属性取值为left或right时，元素属于浮动定位
默认值:none
取值：none left right
float属性：一开始用来文字环绕，并不是用来布局。
浮动元素的弊端：
子元素浮动，导致父元素高度塌陷
条件是父元素高度为auto
原理：子元素是常规流时会占用实际尺寸；子元素是浮动时不会占用实际尺寸；即子元素高度为0，导致父元素也没有高。
由于子元素浮动导致父元素高度塌陷
解决方式：清除浮动
第一步：给父元素添加伪元素
：：after是伪元素
它是当前标签的最后一个子元素
：：before是伪元素
它是当前标签的第一个子元素
第二步：对after设置声明
content：“”；
clear：both；
display：block；
AD：广告 AC：空调
粘性定位
注：
1、给方位值
2、父元素高度大于粘性定位高度
标签：foo sid evel 并且 查找 初始化 问题 产生 文档
原文地址：https://www.cnblogs.com/yangzisong/p/13166242.html
