搜索

首页  >  问答  >  正文

css - 定位为absolute的父元素中的子元素 如何设置在父元素的下面?

有一个父元素绝对定位,它有一个子元素也是绝对定位,父元素z-index大于子元素z-index,为何子元素还是在父元素的上面?如何让这个子元素放在父元素的下面。
链接 https://jsfiddle.net/wwxzw10e/

ringa_leeringa_lee2782 天前1115

全部回复(4)我来回复

  • PHPz

    PHPz2017-04-17 11:57:09

    谢邀~、
    这样的包含关系就应该是这样的吧

    可以考虑换一种方式解决问题

    两个p做同级、外面包一层父元素、根据共同的父元素定位、做层级区分就好了

    回复
    0
  • 高洛峰

    高洛峰2017-04-17 11:57:09

    父元素和子元素之间,z-index是无法对比的,同级之间的z-index才能对比,

    比如<p id="test1"><p id="test3"></p></p> 和<p id="test2"></p>同级
    test1和test2的z-index能对比,但是test2和test3的不管怎么样都无法对比,因为test3永远在test1上面那层,而test1和test2之间才有对比性

    回复
    0
  • ringa_lee

    ringa_lee2017-04-17 11:57:09

    父元素不指定 z-index, 而子元素 z-index-1.

    但这个使用场景应该是很少的.

    回复
    0
  • 怪我咯

    怪我咯2017-04-17 11:57:09

    谢邀.

    俩元素只有在同一个父容器里的时候,由于是在同一个堆叠上下文里,使用z-index才有意义;父子关系只会按照默认的子元素一定会在父元素上边(不考虑其他奇葩情况)来渲染。
    当然这也并不是一定没辙,还有一种情况元素会默认在上边,就是它的标签靠下的时候,类似这种:

    <p>我在下边</p>
    <p>我在上边</p>

    所以有时候把俩标签换个位置写就好了,z-index更适合出现在“默认情况”搞不定的时候兜底~

    以上.

    回复
    0
  • 取消回复