<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>z-index</title><style type="text/css">*{margin: 0;padding: 0;}.box1{position: absolute;width: 100px;height: 100px;background-color: red;top: 100px;left: 100px;}.box2{position: absolute;width: 100px;height: 100px;background-color: green;top: 180px;left: 180px;}</style></head><body><p class="box1">box1</p><p class="box2">box2</p></body></html>
運行結果：
由於box2在box1後面，在沒有設定z-index的情況下，box2會壓住box1。
接下來我們來看一下什麼是從父現象？
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.p1{position: relative;width: 200px;height: 200px;background-color: blue;z-index: 10}.p1 .child1{position: absolute;width: 100px;height: 100px;top: 240px;left: 300px;z-index: 56;background-color: green;}.p2{position: relative;width: 200px;height: 200px;background-color:red;z-index: 20;}.p2 .child2{position: absolute;width: 100px;height: 100px;top: 100px;left: 350px;z-index: 5;background-color: pink;} </style></head><body><p class="p1"><p class="child1"></p></p><p class="p2"><p class="child2"></p></p></body></html>
運行結果：
這裡我們設定p2的z-index小於p1的z-index，設定的p1的子項目child1的z-index大於p2的子項目child2的z-index。但最後啟動並執行結果是child2壓住child1。這就是從父現象。也就是說如果父元素被壓住了。子項目也逃不了被壓住的命運。無論子項目的z-index的大小。
【相關推薦】
1. 免費css線上視頻教程
2. css線上手冊
3. php.cn獨孤九賤（2）－css視頻教程
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
