Question

我必须承认这个应该很容易，但我的大脑似乎可以解决这个问题。从我对z-index的理解。这个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

html, body { height: 100%; margin: 0; } nav { text-align: right; position: fixed; top: 0; background: white; width: 100%; height: 35px; padding-top: 15px; background: black; } #home { padding-top: 50px } a { color: white; text-decoration: none; margin: 5px; } #section1 { background-color: blue; color: white; } #section2 { background-color: green; color: white; } #section3 { background-color: purple; color: white; } .size { width: 100%; height: 700px; } .anchor { display: block; height: 50px; /*same height as header*/ margin-top: -50px; /*same height as header*/ visibility: hidden; }具有HTML结构中级别的概念 - 作为<nav> <a href='#home'>home</a> <a href='#about'>about</a> <a href='#contact'>contact</a> <pre style='float:right'> </pre> </nav> <span class='anchor' id='home'></span> <div id='section1' class='size'>Home</div> <span class='anchor' id='about'></span> <div id='section2' class='size'>about </div> <span class='anchor' id='contact'></span> <div id='section3' class='size'>contact </div>级别更深层次，在HTML中，然后是另一个圈子，它是＆＃39; s z-index范围将在圆圈下方。

一个简单的解决方案是将.infographic__center添加到z-index类。

relative ：此关键字列出所有元素，就像元素未定位一样，然后调整元素的位置，而不更改布局（从而为元素留下间隙）它本来是没有定位的）。 position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

MDN CSS position

希望这有帮助:)

Answer 2

z-index不适用于静态元素。

点击此处http://reference.sitepoint.com/css/z-index

此属性指定其位置值的框的堆栈级别是绝对的，固定的或相对的。

解决方案

添加相对于.infographic__center类

的位置

codepen link .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 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;
    }

Z-index不起作用（可能在codepen中）

3 个答案: