DIV绝对定位和相对定位

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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值