在无法调整z-index的情况下将网页元素置于顶部或底部

Author Avatar
st 2020年08月29日
  • 在其它设备中阅读本文章
  • 分享到 Facebook
  • 分享到 Telegram
  • 分享到 Twitter
  • 分享到微博

只能说stackoverflow还是NB。

先来点碎碎念。

最近有个收拾烂摊子的项目,大概情况是朋友请了人做个网上商店,主要功能是用户可以自定义商品然后自助下单,程序员做了一半然后开始拖,拖了几个月跑路了。我接手的时候主要功能其实看着都没啥问题了,只有总价计算稍微有点不正常,想想应该问题不大,结果看到之前那人的代码我傻了,这小子自定义JS的文件名取的是myNewJs.js,同一个目录里头还有个没用上的myJs.js,我说不出话来。

一个建议,没啥耐心的人可千万别接这种活,能做一半跑路的,代码八成也是一团乱。朋友也挺NB的,他自己居然不知道价格计算的公式,我接了活前两天就光在看代码,好不容易才把价格公式搞明白,几乎把所有价格计算相关的代码全都重写了才把功能修好。

不过这个不是这次的重点,功能好了过后我开始着手外观上的修修补补,有一个页面的下拉菜单永远会被别的内容挡住,改z-index一点反应没有。我研究了半天stack context也没发现问题出在哪,顺带一提,有个叫z-context的chrome插件,做相关分析很好用。应该是之前那人的代码里把别的什么东西置于顶部了,没考虑到下拉菜单。本来是应该重写那部分代码的,但我根本找不到,也没时间去全部重写,只能找别的解决方案了。

搜了半天,找到一个stackoverlow的问题Why can't an element with a z-index value cover its child?,里面有个很有意思的解决方案。实现方式是用CSS的3D变换把div提起来或者压下去,甚至不用动js。
总共就加两行代码:给要调整的元素的父元素加上transform-style: preserve-3d;,给要调整的元素加上transform:translateZ(1px);

虽然不是什么best practice,真要说的话大概都能算worst practice了,不过至少能用。而且这个方案只能把元素放在最顶上或者最底下,所以大多数时候也不太实用,也就能用在下拉菜单或者背景图片之类的上面了。

本文链接:https://blog.stsecurity.moe/archives/116/
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

      新篇
旧篇      
    • fingerprint Login
  • home 主页
  • inbox 归档
    • October 2024 1
    • July 2024 1
    • May 2024 2
    • April 2024 2
    • March 2024 1
    • December 2023 1
    • October 2023 1
    • September 2023 2
    • August 2023 3
    • July 2023 2
    • March 2023 1
    • February 2023 2
    • October 2022 1
    • July 2022 1
    • May 2022 1
    • April 2022 3
    • January 2022 1
    • September 2021 1
    • August 2021 2
    • July 2021 1
    • June 2021 4
    • May 2021 8
    • April 2021 6
    • March 2021 1
    • January 2021 2
    • December 2020 2
    • November 2020 2
    • August 2020 1
    • July 2020 3
    • June 2020 1
    • March 2020 2
    • February 2020 3
    • December 2019 1
    • October 2019 1
    • July 2019 5
    • June 2019 3
    • April 2019 4
    • March 2019 2
    • January 2019 2
    • December 2018 2
    • November 2018 7
    • October 2018 1
  • apps 分类
    • Default
    • Notes
    • Anime
    • Manga
    • Game
    • Movie
    • Random Stuff
  • 关于本站 About This Site
  • 关于我 About Me
  • 友情链接 Friends
  • 文章总数 93
  • Serial Experiments ST Serial Experiments ST
  • Lilymagic Lilymagic
  • 人毛 人毛
  • 主题 - Material i
    expand_less
    Copyright © 2025 无名神殿
    技术博客 Lilymagic
    Powered by Typecho
    Theme - Material