CSS定位以及z-index属性(层叠性)的详解

本文详细介绍了CSS中的四种定位方式:静态定位、绝对定位、相对定位和固定定位,并解释了它们的特点及应用场合,包括如何处理层叠性和z-index属性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

定位

定位方向:top left right bottom就这四个位置

一、静态定位
 positionstatic;

静态定位就是文档流,没有别的意思,不需要写

二、绝对定位 (脱标)
positionabsolute;
(注意)参考点问题:

1)如果用top描述,定位的参考点是整个页面的最左上角,而不是浏览器的左上角
2) 如果用bottom描述,参考点是“ 浏览器首屏窗口尺寸 ”,注意:是首屏, 对应当前页面的左下角(不滚动到下面去)

  1. 若无相对定位作参考,则以浏览器页面为参考
  2. 当盒子发生嵌套关系时,如果父集元素没有设置定位,子盒子设置了绝对定位并赋值,子盒子的位置从浏览器左上角出发。
  3. (子绝父绝)当盒子发生嵌套关系时,如果父集元素设置了绝对定位,子盒子设置了绝对定位并赋值,子盒子的位置从父集元素左上角出发。
三、相对定位
positionrelative;

就是微调元素的位置,让元素想对自己原来的位置,进行位置调整

1.不脱标,老家留坑,形影分离

本质上元素位置还在原来的地方,只不过飘到别的地方去了(相当于影子)

2.使用相对定位,位置从自身出发

3.还占据原来的位置。没有脱标,可用于做微调

四、固定定位
 position: fixed;

是相对于浏览器窗口定位。页面如何滚动,这个盒子显示的位置保持不变。(IE6不兼容)

1.脱标

2.固定定位后,以浏览器为参考点

层叠性:z-index属性

(number类型)正整数,默认的z-index值是0

取值范围如下:
这里写图片描述

1)从夫现象

父节点的z-index属性值,将会直接影响子节点的层叠性
即: 父节点的z-index值很小,无论子节点的z-index值多大,其层级仍然小。

  1. 例如:
    A,B节点都设置position为relative,且A的z-index为1,B的z-index为0,A的层级比B大
    因此:A的子节点必定会覆盖在B的子节点上,无论B的子节点的z-index值多大。
<div id="A" style="position:relative;z-index:1;">
    <div id="a-1" >A-1</div>
</div>
<div id="B" style="position:relative;z-index:0;">
    <div id="b-1">B-1</div>
</div>

2) z-index值表示谁压着谁。数值大的压盖住数值小的

3)只有定位了的元素,才能有z-index值(相对定位,绝对定位,固定定位)浮动的盒子不能用。

4)如果都没有z-index值,或值都相同,那么谁在HTML后面,谁就在上面,压住别人。

<div id="a">A</div>
<div id="b">B</div>
<!--A,B节点都设置了定位,且没有设置z-index值,那么B节点会将A节点遮住-->

注意:
定位了的元素,永远能够压住没有定位的元素

层叠顺序

层级由低到高:
1.标准流盒子 < 浮动盒子 < 定位盒子
2.background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index:0 < 正index
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值