【问题标题】:css z-index on elements with "position" property具有“位置”属性的元素上的 css z-index
【发布时间】:2020-06-06 20:24:34
【问题描述】:

在我的反应应用程序中,我有一个组件具有位置:固定,底部:0 属性。 当我向下滚动并接收页脚时,我需要通过将 z-index: 0 添加到固定组件并将 z-index 9999 添加到页脚来将该组件隐藏在页脚后面,但它不起作用。为固定组件提供负值后,它开始与同一页面上的其他组件一起工作错误。

【问题讨论】:

  • 您是否为所有需要的元素设置了位置属性? z-index 仅在元素超出正常流程时才有效
  • 您能否更好地表达您的问题并使用一些标记?
  • 页脚也定位了吗?它需要 z-index 才能工作。定位的元素将显示在未定位的元素之上。
  • Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). - w3schools.com/cssref/pr_pos_z-index.asp
  • 如果你为所涉及的元素发布你的css,也许你会得到更好的帮助。我很明显的事情是从一开始就将页脚放在更高的 z-index 中,并且不要忘记在其上设置 position: relative; 以防它没有它。此外,完全没有必要使用如此高的 z-index 数字,具体取决于它的结构,但您可以在一个元素上使用 z-index: 10;,在页脚上使用 z-index: 11;

标签: html css reactjs z-index


【解决方案1】:

添加到页脚:

posistion: relative; 
z-index: 99;

【讨论】:

    猜你喜欢
    • 2016-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-09-30
    • 1970-01-01
    相关资源
    最近更新 更多