发表于: 2017-03-11 21:58:49
1 624
今天完成的事情:
relative(老大)、absolute(老二)、fixed(老三):同源性position
老二和老三脱离文档流
老大对老二限制
1、限制left/top/right/bottom定位(老二在老大地盘内) 所以用absolute要向父定位
2、限制z-index层级(老大决定老二最大层级)看父层
3、限制overflow(老二超过老大地盘会被裁剪)没有relative会出去
老大对老三限制
1、限制z-index层级(老大决定老三最大层级)
relative就是定位原来自身原点。absolute就是参考其他原点,所以要个父参考,进行坐标定位,定位用位置上下左右,或者百分比取值。定位之后就和兄弟元素没什么关系了,意思就是说自己独立了。
relative定位时top和left优先于bottom和right
relative:
提高层叠上下文:如果有两张图片层叠在一起,像让下面的图片放到上面来,就可以设置下面的图片的position为relative
新建层叠上下文与层级控制:如果子元素设置了absolute,z-index:4;父元素设置了relative,z-index:1;另外一个子元素设置了absolute,z-index:2;父元素设置了relative,z-index:3;则结果会使后者显示在上面,要看大哥relative的z-index
将父元素的z-index:auto是不会限制内部absolute元素层叠问题,不包括IE6/IE7
因为IE6/IE7在z-index:auto情况下会创建层叠上下文bug
relative要遵循避免原则和最小化原则,即能不用relative则不用,relative作用的div范围越小越好
<div position:relative>
<img src positon:absolute.top right>
</div>
明天计划的事情:复习task1-task3。
遇到的问题:relative排版
收获:relative定位是相对原来位置。
评论