首页 > 代码库 > position定位
position定位
1.CSS定位有4种
static 默认值,没有定位 此种元素存在于文档流中
absolute 绝对定位 元素脱离文档流,浮动在普通元素上面,多个叠加绝对定位的元素可通过z-index的大小改变层叠顺序
fixed 绝对定位 元素脱离文档流,浮动在普通元素上面 ,多个叠加绝对定位的元素可通过z-index的大小改变层叠顺序
relative 相对定位 相对于元素创建时所在的位置定位,此时元素仍在文档流中,不管该元素怎么定位,后面的元素都仍为该元素位置没有改变,多个叠加相对定位的元素可通过z-index的大小改变层叠顺序
2.z-index控制元素的堆叠顺序
2.1在html中,后创建的元素一定在先创建的元素上面,所以z-index相同的情况下,后创建的元素在上面
2.2不能通过z-index控制父元素堆叠在子元素上面,只能控制脱离文档流后的浮动元素族;比如
<div id=‘child1‘ style="width:100px;height:400px;position:fixed;top:40px;left:20px;z-index:18"></div> <div id=‘child2‘ style="width:50%;height:400px;position:static;top:40px;left:20px;z-index:15"> <div id=‘sub1‘ style="width:150px;height:200px;position:absolute;left:30px;top:30px;z-index:1"></div> <div id=‘sub2‘ style="width:50%;height:200px;position:fixed;left:60px;top:30px;z-index:19"></div> </div>
由于child2是static定位,那么sub2在fixed定位时,浮动元素族有:child1,sub1,sub2;三者通过z-index改变互相堆叠顺序
3.width,height,top,left,right,bottom在使用百分比时,它们是相对于谁的百分比?
根据定位的方式来确定:
absolute:往上寻找不是static定位的第一个祖先元素,当前元素的width,height,top,left,right,bottom都是相对于该祖先元素设置的
fixed:参照对象是浏览器
relative:参照改元素原本在文档流中的位置定位,同样具有top,left,right,bottom定位属性,width和height参照父元素的宽高,不关心父元素的定位
static:width和height参照父元素
position定位
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。