DIV绝对定位和相对定位

来源:互联网 发布:centos与ubuntu 编辑:程序博客网 时间:2024/05/29 12:52

div的css样式 绝对定位 position:absolute 默认是以浏览器body(上下左右四个角)作为参照点进行偏移定位(例如.div{position:absolute; top:20px;;left:20px;意思是定位到偏移

距离浏览器左上角为20px距离的位置)同时绝对定位会脱离文档流,飘起来原来的位置会被文档流后面的元素补充占据, 绝对定位的内容如果向左或者向上偏移溢出内容会被隐藏,但是向右或者向下偏移若内容溢出的话会有滚动条,而相对定位position:relative无论是哪个方向内容都会被隐藏,并且相对定位脱离文档流之后原来的位置还是会继续占据着为空不会被文档流后面的元素补充占据,相对定位就是针对你原来应该所在的位置进行偏移。


绝对定位一般用在父级是相对定位的div中,这样的话绝对定位就不会以浏览器的四个角为参照点进行偏移,而是参照样式为相对定位的父DIV作为参照点进行偏移。 还有一点就是绝对定位和浮动不能同时使用


z-index是专门为绝对定位服务的,z-index只对于绝对定位起作用,对于多个使用绝对定位的层,重叠了可以使用z-index属性,例如z-index:10不用单位,数值越大越靠前数值越小的层就在最底下,此时边距不起作用

0 0
原创粉丝点击