CSS 父子層 z-index 問題 有趣範例

做前端切版這麼久,一直覺得自己對切版能應付9成以上的版型,但今天遇到一個基礎的問題,卻考倒了自己。

HTML

<div class="adiv"></div>
<div class="bdiv">
  <div class="r-box">
    <div class="cdiv"></div>
  </div>
</div>


CSS

.adiv {
  width: 300px;
  height: 300px;
  background-color: #000;
  position: fixed;
  z-index: 21;
}
.bdiv {
  width: 300px;
  height: 300px;
  background-color: #ff00ff;
  position: fixed;
  left: 100px;
  top: 100px;
  z-index: 20;
}
.cdiv {
  width: 300px;
  height: 300px;
  background-color: #00ff00;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 22;
}
.r-box {
  position: relative;
  width: 100%;
  height: 100%;
}

如果 HTML 不可更動

要怎麼將
bdiv放最底層
adiv放中間
cdiv放最上層

平常在寫這樣的版型其實沒甚麼難度,改一下HTML就能輕鬆搞定。

解決方案1

HTML

    <div class="bdiv">
        <div class="adiv"></div>
      <div class="r-box">
        <div class="cdiv"></div>
      </div>
    </div>

CSS

.adiv {
  width: 300px;
  height: 300px;
  background-color: #000;
  position: fixed;
  z-index: 21;
  left: 0;
  top: 0;
}
.bdiv {
  width: 300px;
  height: 300px;
  background-color: #ff00ff;
  position: fixed;
  left: 100px;
  top: 100px;
  z-index: 20;
}
.cdiv {
  width: 300px;
  height: 300px;
  background-color: #00ff00;
  position: absolute;
  left: 100px;
  top: 100px;
  z-index: 22;
}
.r-box {
  position: relative;
  width: 100%;
  height: 100%;
}

就能達成,但是因為HTML不可更動,讓人覺得不可能,我自己沒辦法,網路上的大神,總會有方法,只有請教IT幫的大神,後來還真的解決了,也讓我大愾眼界,把基礎又打紮實點了

解決方案 – 正確解法


HTML

<div class="adiv"></div>
<div class="bdiv">
  <div class="r-box">
    <div class="cdiv"></div>
  </div>
</div>


css

.adiv {
  width: 200px;
  height: 200px;
  background-color: #000;
  position: absolute;
  z-index: 2;
}

.bdiv {
  width: 300px;
  height: 300px;
  background-color: #ff00ff;
}
.cdiv {
  width: 300px;
  height: 300px;
  background-color: #00ff00;
  position: relative;
  left: 100px;
  top: 100px;
  z-index: 3;
}

.r-box {
  position: relative;
  width: 100%;
  height: 100%;
}

他將bdiv的position刪除,這樣cdiv的z-index就可以影響adiv,就能達成我需要的樣式,真的受教了。

夾尾巴

不知道甚麼端的工程師,低薪努力中

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *