Web_Basic
  • Introduction
  • Web Component
  • HTML basic
  • CSS basic
    • Inline element 與 Block element
    • 實用CSS 技巧
    • CSS Grid 教學
  • CSS Advance
    • Adobe spectrum
    • CSS Tricks
    • Contain block
    • OOCSS、SMACSS、BEM、SEM、BIO
    • z-index
    • Flexbox教學
    • 使用Materialize css
    • 使用Semantic UI
    • 使用Bootstrap
    • Ant design
    • Less
    • Animation
    • 簡單的特效
    • SCSS
  • Javascript basic
  • 開始寫一個網站前
    • 寫一個靜態網站2
    • 寫一個靜態網站
  • 部屬到github pages
  • 做一個OX小遊戲
  • 做一個貪食蛇小遊戲
  • canvas
  • Regexp
  • SVG
  • Sublime快捷鍵
  • Deploy Blog 使用 Hexo
  • 域名設定
    • 註冊域名信箱
      • 使用AWS SES
      • mailgun
    • subdomain，清除DNS快取
  • 使用cloudflare
  • 使用VNC server
  • SEO
    • Sitemap
    • search console
  • 遠端連線
  • HTML LiveReload
  • ngrok 與 local tunnel
  • Service worker 與 Cache
  • Zeplin 搭配 Sketch
  • 測試 IE 網頁相容性
  • 網站產生器
Powered by GitBook
On this page
  • 1.child absolute 會壓在parent上方，但移除parent z-index 並在child 加上negative zindex後可壓到child上方。
  • 2.同層div的順序也會影響，放在前面的div會被壓在下面，但static的position會被壓在最下方。
  • 3.其他同層container 有更大的zindex，就算較小的container zindex下有最大的zindex child還是會被覆蓋。
  • 4. opacity小於1 的元素也會讓他成為z-index的stack contexts
  • 不錯的文章：

Was this helpful?

  1. CSS Advance

z-index

PreviousOOCSS、SMACSS、BEM、SEM、BIONextFlexbox教學

Last updated 4 years ago

Was this helpful?

1.child absolute 會壓在parent上方，但移除parent z-index 並在child 加上negative zindex後可壓到child上方。

移除.container1 z-index 試試

2.同層div的順序也會影響，放在前面的div會被壓在下面，但static的position會被壓在最下方。

3.其他同層container 有更大的zindex，就算較小的container zindex下有最大的zindex child還是會被覆蓋。

4. opacity小於1 的元素也會讓他成為z-index的stack contexts

不錯的文章：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
https://codepen.io/anon/pen/gBdGPN
https://codepen.io/anon/pen/QZVVbY
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index
LogoWhat No One Told You About Z-IndexPhilip Walton