css層疊順序調整：讓.box在.cover之上顯示，同時.case被.cover遮罩
處理CSS層疊順序時，常常會遇到一些復雜的問題。今天我們要解決的問題是如何在不改變html結構的情況下，僅通過修改CSS，使得.box元素顯示在.cover之上，而.case元素被.cover遮罩。
首先，我們來看一下原始的HTML和CSS代碼：
<template></template> .container { height: 100vh; background: #000; .cover { position: fixed; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; left: 0; bottom: 0; z-index: 999; } .case { position: fixed; z-index: 100; width: 800px; height: 400px; left: 50%; top: 50%; margin-left: -400px; margin-top: -200px; background: #fff; display: flex; .box { width: 300px; height: 200px; background: #000; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; z-index: 99999; } } }
在原始代碼中，.cover的z-index設置為999，而.box的z-index設置為99999，看起來.box應該在.cover之上，但實際效果可能不符合預期。
為了解決這個問題，我們需要調整CSS中的z-index值，并確保.container有一個相對定位的上下文。以下是調整后的CSS代碼：
立即學習“前端免費學習筆記（深入）”；
<template></template> .container { height: 100vh; background: #000; position: relative; .cover { position: fixed; background: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; left: 0; bottom: 0; z-index: 99; } .case { position: fixed; z-index: 100; width: 800px; height: 400px; left: 50%; top: 50%; margin-left: -400px; margin-top: -200px; background: #fff; display: flex; .box { width: 300px; height: 200px; background: #000; position: fixed; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; z-index: 999; } } }
在調整后的代碼中，我們對.container添加了position: relative;，確保其成為一個定位上下文。然后，我們將.cover的z-index調整為99，.case的z-index保持為100，而.box的z-index設置為999。這樣，.box將顯示在.cover之上，而.case將被.cover遮罩。
通過這些調整，我們成功地實現(xiàn)了所需的層疊順序效果。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
