.container { position: relative; } .box { width: 100px; height: 100px; position: absolute; } .red { background-color: red; z-index: 1; top: 0; left: 0; } .blue { background-color: blue; z-index: 2; top: 30px; left: 30px; } .green { background-color: green; z-index: 3; top: 60px; left: 60px; }

欢迎来到我的网站

探索CSS图层的美丽！

.image-container { position: relative; width: 500px; height: 300px; } .background { width: 100%; height: 100%; object-fit: contain; } .text-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; background-color: rgba(0, 0, 0, 0.5); padding: 20px; border-radius: 10px; } .stacked-boxes { position: relative; height: 200px; width: 200px; } .box { position: absolute; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; color: white; } .bottom { background-color: blue; top: 0; left: 0; } .middle { background-color: green; top: 30px; left: 30px; } .top { background-color: red; top: 60px; left: 60px; } .scene { position: relative; width: 800px; height: 600px; overflow: hidden; } .background { width: 100%; height: 100%; object-fit: cover; } .cloud { position: absolute; width: 200px; height: 100px; background-color: blue; border-radius: 50px; } .cloud1 { top: 50px; left: 100px; z-index: 2; } .cloud2 { top: 100px; right: 100px; z-index: 1; } .sun { position: absolute; top: 50px; right: 50px; width: 100px; height: 100px; background-color: yellow; border-radius: 50%; z-index: 1; } .bird { position: absolute; width: 30px; height: 20px; background-color: black; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); } .bird1 { top: 150px; left: 300px; z-index: 3; } .bird2 { top: 200px; right: 400px; z-index: 3; } .message { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); background-color: rgba(255, 255, 255, 0.7); padding: 20px; border-radius: 10px; z-index: 4; }

作品「CSS分层」预览