.jpg)
css層疊順序調(diào)整：讓.box在.cover之上顯示，同時(shí).case被.cover遮罩
處理CSS層疊順序時(shí)，常常會(huì)遇到一些復(fù)雜的問(wèn)題。今天我們要解決的問(wèn)題是如何在不改變html結(jié)構(gòu)的情況下，僅通過(guò)修改CSS，使得.box元素顯示在.cover之上，而.case元素被.cover遮罩。
首先，我們來(lái)看一下原始的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設(shè)置為999，而.box的z-index設(shè)置為99999，看起來(lái).box應(yīng)該在.cover之上，但實(shí)際效果可能不符合預(yù)期。
為了解決這個(gè)問(wèn)題，我們需要調(diào)整CSS中的z-index值，并確保.container有一個(gè)相對(duì)定位的上下文。以下是調(diào)整后的CSS代碼：
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
<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; } } }
在調(diào)整后的代碼中，我們對(duì).container添加了position: relative;，確保其成為一個(gè)定位上下文。然后，我們將.cover的z-index調(diào)整為99，.case的z-index保持為100，而.box的z-index設(shè)置為999。這樣，.box將顯示在.cover之上，而.case將被.cover遮罩。
通過(guò)這些調(diào)整，我們成功地實(shí)現(xiàn)了所需的層疊順序效果。
? 版權(quán)聲明
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載。
THE END
.png)
