Z索引不起作用； 不知道為什么。

Question

我有一個測試環境，並且z-index出於某種原因無法正常使用該網站。 我嘗試過的位置：相對； 在大多數元素上，但不確定為什么它不起作用。

由於它是使用視覺生成器制作的，因此DOM結構非常混亂。

http://104.236.219.66/reachchina/

這是網站。

這是有問題的部分：

它在卡片的各個部分中：卡片不在橙色“散落的墨水”背景的頂部，並且墨水懸停在卡片上方。

知道為什么它不起作用嗎？

提前致謝。

Answer 1

您有一格是卡片的容器，一格是污漬的容器。

如果要使用z-index確保卡片容器在污漬容器上方，則需要指定它。 使用position: relative/absolute/fixed; 僅激活z-index的功能，但默認情況下將其設置為0。

要解決這個問題，只需添加z-index: 1; 到卡片容器。

不幸的是，您尚未提供可編輯的演示。 您應添加z-index: 1;的div z-index: 1; 到.vc_row wpb_row.vc_row-fluid ，在#services-section上方#services-section 。

您也可以查看該演示，希望它能最好地反映您的問題：

 #circle { /* this is the required property */ z-index: 1; } #circle { width: 200px; height: 200px; background: white; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border-radius: 150px; margin: 50px; position: relative; } #square { width: 200px; height: 150px; background: #7db620; top: 200px; position: absolute; z-index: 0; } 

  <div id="circle"></div> <div id="square"></div> 

Answer 2

css .card-text.home p { height: 180px; }有一個固定的高度.card-text.home p { height: 180px; } .card-text.home p { height: 180px; }

您必須將其更改為min-height，然后將框的高度設置如下：

.card-text.home p { min-height: 180px; }

Answer 3

Itay Ganor在上面寫了完美的答案。 他詳細描述了該問題，並通過一個一般示例對其進行了簡化。

我試圖根據頁面源寫答案。 請按照以下說明進行操作，它應該適合您。

1. 放置在主題面板或子主題的style.css中的CSS代碼：

   .ult-carousel-wrapper .slick-slider { z-index: 1; }

2. 清除緩存。

3. 再次查看頁面。

---

瀏覽器代碼視圖

---

瀏覽器前視圖