Z-index不起作用（在codepen中，也許）

Question

我不得不承認，這個應該很容易，但我的大腦似乎可以解決這個問題。從我對Z指數的理解。這codepen應該工作，但它不是，我不知道爲什麼。也許codepen有問題嗎？

https://codepen.io/mrowka3d/pen/bWZGWL?editors=0100

上面codepen具有中心內容和它周圍的三個較小的圓。較小的圓圈應位於較大的中心圓下方。但我似乎無法讓他們去，我不知道爲什麼。

只是那些日子我猜:)

感謝您抽空看看一個

HTML：

<div class="infographic"> 
    <div class="infographic__callout infographic__callout-position1">1</div> 
    <div class="infographic__center"> 
    <div class="center__title"><span class="center__serif-font">why</span> <br><span class="color2">companies<br> partner</span><br> <span class="center__serif-font">with</span> <span>PDAK</span></div> 
    <div class="center__cta">Find out</div> 
    </div> 
    <div class="infographic__callout infographic__callout-position2">2</div> <!-- I even tried placing them before and after the center div --> 
    <div class="infographic__callout infographic__callout-position3">3</div> 
</div> 

CSS：

.infographic { 
    width: 100%; 
    position: relative; 
    padding-top: 50px; 
    z-index: 1; 
} 

.infographic__center { 
    width: 375px; 
    height: 375px; 
    margin: 0 auto; 
    border-radius: 50%; 
    background: #f6f6f6; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    flex-flow: column wrap; 
    color: #4f2582; 
    font-family: "Roboto", Tahoma, helvetica, arial, sans-serif; 
    text-transform: uppercase; 
    font-size: 22px; 
    font-weight: bold; 
    letter-spacing: 0.18em; 
    line-height: 1.5em; 
    z-index: 20; /* this doesn't seem to do anything */ 
} 

.center__serif-font { 
    font-family: Georgia, serif; 
    font-style: italic; 
    text-transform: none; 
    letter-spacing: 0em; 
    font-size: 24px; 
    font-weight: normal; 
} 

.color2 { 
    color: #16c1b7; 
} 

.center__cta { 
    font-size: 80%; 
    letter-spacing: 0em; 
    font-weight: normal; 
    position: relative; 
    cursor: pointer; 
    margin-top: 10px; 
} 

.center__cta:after { 
    content: ">"; 
    position: absolute; 
    transform: rotate(90deg); 
    width: 0; 
    left: 50%; 
    bottom: -20px; 
    font-size: 30px; 
} 

.infographic__callout { 
    position: absolute; 
    width: 186px; 
    height: 186px; 
    border: 1px solid #cacaca; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 1; 
} 

.infographic__callout-position1 { 
    left: 65%; 
    top: 23%; 
    margin: -93px; 
} 

.infographic__callout-position2 { 
    right: 70%; 
    bottom: 30%; 
    margin: -93px; 
} 

.infographic__callout-position3 { 
    left: 50%; 
    bottom: -10%; 
    margin: -93px; 
} 

Answer 1

的z-index並不適用於靜態元素。

檢查這裏http://reference.sitepoint.com/css/z-index

該屬性指定的箱，其位置值 是絕對的，固定的，或相對的疊層水平。

解決方案

添加相對於.infographic__center類

codepen鏈接位置。infographic__center https://codepen.io/anon/pen/mmoLGz?editors=0100

代碼片段

.infographic { 
 
    width: 100%; 
 
    position: relative; 
 
    padding-top: 50px; 
 
    z-index: 1; 
 
} 
 

 
.infographic__center { 
 
    width: 375px; 
 
    height: 375px; 
 
    margin: 0 auto; 
 
    border-radius: 50%; 
 
    background: #f6f6f6; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    text-align: center; 
 
    flex-flow: column wrap; 
 
    color: #4f2582; 
 
    font-family: "Roboto", Tahoma, helvetica, arial, sans-serif; 
 
    text-transform: uppercase; 
 
    font-size: 22px; 
 
    font-weight: bold; 
 
    letter-spacing: 0.18em; 
 
    line-height: 1.5em; 
 
    z-index: 20; /* this doesn't seem to do anything */ 
 
    position:relative; 
 
} 
 

 
.center__serif-font { 
 
    font-family: Georgia, serif; 
 
    font-style: italic; 
 
    text-transform: none; 
 
    letter-spacing: 0em; 
 
    font-size: 24px; 
 
    font-weight: normal; 
 
} 
 

 
.color2 { 
 
    color: #16c1b7; 
 
} 
 

 
.center__cta { 
 
    font-size: 80%; 
 
    letter-spacing: 0em; 
 
    font-weight: normal; 
 
    position: relative; 
 
    cursor: pointer; 
 
    margin-top: 10px; 
 
} 
 

 
.center__cta:after { 
 
    content: ">"; 
 
    position: absolute; 
 
    transform: rotate(90deg); 
 
    width: 0; 
 
    left: 50%; 
 
    bottom: -20px; 
 
    font-size: 30px; 
 
} 
 

 
.infographic__callout { 
 
    position: absolute; 
 
    width: 186px; 
 
    height: 186px; 
 
    border: 1px solid #cacaca; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    z-index: 1; 
 
} 
 

 
.infographic__callout-position1 { 
 
    left: 65%; 
 
    top: 23%; 
 
    margin: -93px; 
 
} 
 

 
.infographic__callout-position2 { 
 
    right: 70%; 
 
    bottom: 30%; 
 
    margin: -93px; 
 
} 
 

 
.infographic__callout-position3 { 
 
    left: 50%; 
 
    bottom: -10%; 
 
    margin: -93px; 
 
}

<div class="infographic"> 
 
    <div class="infographic__callout infographic__callout-position1">1</div> 
 
    <div class="infographic__center"> 
 
    <div class="center__title"><span class="center__serif-font">why</span> <br><span class="color2">companies<br> partner</span><br> <span class="center__serif-font">with</span> <span>PDAK</span></div> 
 
    <div class="center__cta">Find out</div> 
 
    </div> 
 
    <div class="infographic__callout infographic__callout-position2">2</div> <!-- I even tried placing them before and after the center div --> 
 
    <div class="infographic__callout infographic__callout-position3">3</div> 
 
</div>

Answer 2

z-index具有的概念在HTML結構中的級別 - 如.infographic__center更深一層，在HTM L，然後是另一個圓圈，它的範圍將在圓圈下方 z-index。

一個簡單的解決方案是將position: relative;添加到.infographic__center類。

相對：此關鍵字勾畫出的所有元素，就好像元件未定位，並且然後調節元件的位置，而不改變佈局（並且因此離開那裏它會一直有它的元件的間隙沒有被定位）。位置：相對於表的效果 - * - 組，錶行，表列，表格單元和表標題元素未定義。

MDN CSS position

希望這有助於:)

Answer 3

更新這個在CSS

.infographic__callout { 
     position: absolute; 
     width: 186px; 
     height: 186px; 
     border: 1px solid #cacaca; 
     border-radius: 50%; 
     display: flex; 
     align-items: center; 
     justify-content: center; 
     z-index: -1; 
    }