您的位置:首页技术文章
文章详情页

html5 - 可以让z-index不管多小,子元素总是显示在父元素之上吗

浏览:75日期:2023-01-24 09:53:20

问题描述

就是 子元素 的 z-index 小于父元素时,仍然显示在 父元素 上面

问题解答

回答1:

要设置容器的 z-index 必须是该p定位是绝对定位才可以以下是 W3C标准:

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!

显然 题主既然问这个问题 应该是已经设置了定位 我不知道我说的对不对

如果你只需要 让子元素显示在父元素上面 直接用定位 不用z-index 不就可以了吗

如果你已经设置了 z-index 那就不能通过定位解决这个问题了

回答2:

给父元素指定非 static 的 position, 以及非 auto 的 z-index 值即可.

回答3:

父元素position:relative;z-index:1,子元素position:absolute;z-index:10,就可以做到子元素在父元素之上了

回答4:

1.父子级元素不需要添加任何定位属性,子级永远在父级之上显示。2.1.如果添加定位属性,父级设置 position: relative;z-index不设置,子级设置 position: absolute;z-index:(0-无穷大);这里面子级的z-index必须大于父级z-index。因为父级一般默认z-index为0或者auto。2.2.如果父级设置 position: relative;z-index:任意值;子级设置 position: absolute;z-index:任意值。也可以实现 子元素的z-index小于父元素时,仍然显示在 父元素 上面,但显然这样没有任何意义了,子级的z-index完全可以省略。

回答5:

1- 没有z-index,子级天生就应该在父级的上边;2- 情况同上,同级的兄弟元素,书写顺序靠下的在上边;3- 举个简单的例子:

<p id='boxA'> <p id='boxB'></p></p><p id='boxC'></p>

层级关系#boxC>#boxB>#boxA4- 个人觉得z-index更适合调整个别的层级关系,用太多容易乱。所以出问题的话,建议试试先去掉z-index,然后调整标签位置的方法。

标签: Html5