开发者社区> 问答> 正文

关于CSS中z-index的问题

如下图所示,我的modal的z-index为1040,两个button为10,灰色层默认为1030,但是我的modal对话框显示不出来,我就调整了灰色层的z-index。为灰色为100时,显示不出来,灰色为99时,modal和button都显示出来了……请问是什么问题?
screenshot
screenshot

展开
收起
杨冬芳 2016-06-12 15:52:03 2427 0
1 条回答
写回答
取消 提交回答
  • IT从业

    参考这篇文章,可能是定位,可能是后面比较复杂的元素堆栈排列顺序了
    关于z-index的真正问题是,很少有人理解它到底是怎么用。其实它并不复杂,但是如果你从来没有花一定时间去看具体的z-index相关文档,那么你很可能会忽略一些重要的信息。

    不相信我吗?好吧,看看你能否解决下面这个问题:

    问题:

    在 接下来的HTML里 有三个

    元素,并且每个
    里包含一个元素。每 个被分别给定一个背景颜色:红、绿、蓝。每个被放置到文档的左上角附近,部分重叠着其他 的元素,这样你就可以看到哪些是被堆叠在前面。第一个有一个z-index的值为1,而其他两个没有任 何z-index值。

    以下就是这个HTML和它的基本CSS。

    HTML代码

    1
    2
    3
    4
    5
    6
    7
    8
    9


    Red


    Green


    Blue

    CSS代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .red, .green, .blue {
    position: absolute;
    }
    .red {
    background: red;
    z-index: 1;
    }
    .green {
    background: green;
    }
    .blue {
    background: blue;
    }

    2019-07-17 19:34:21
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载