绝对定位和 Z-Index 堆叠

Question

我正在尝试重新创建所谓的 skill-cirle，它在 CV 模板中很流行。

像这样

我正在尝试使用以下代码实现此目的，希望您能有所了解。

CSS

/* +++++ SKILL MODULES +++++ */
.skill-item {
  width: 100px;
  height: 100px;
  text-align: center; }
  .skill-item__title {
    color: #494949; }
  .skill-item__circle {
    border-radius: 50%;
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
    background-color: #52b3d9;
    overflow: hidden; }
    .skill-item__circle-progress {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 66px;
      background-color: #68c3a3; }
    .skill-item__circle-percent {
      display: table-cell;
      width: 100%;
      vertical-align: middle;
      color: #494949; }

/* ----- SKILL MODULES ----- */

HTML

   <div class="skill-item item">
                            <div class="skill-item__circle">
                                <div class="skill-item__circle-progress" data-percent="66"></div>
                                <div class="skill-item__circle-percent">66%</div>
                            </div>
                            <h4 class="">HTML5 + CSS3</h4>
                        </div>

这是我的结果

和JSFiddle Link

如您所见，我的 absolute positioned 块覆盖了文本块，但我需要它来实现反之亦然。堆叠在 background progress block.

顶部的百分比文本

我怎样才能做到这一点？

如果有任何帮助或建议如何做得更好，我将不胜感激。

Answer 1

我想这就是你想要的。如果你只添加 position/z-index 你可以把任何东西放在任何东西上。

https://jsfiddle.net/znc6wk36/1/

.skill-item {
  width: 100px;
  height: 100px;
  text-align: center; }
  .skill-item__title {
    color: #494949; }
  .skill-item__circle {
    border-radius: 50%;
    position: relative;
    display: table;
    height: 100%;
    width: 100%;
    background-color: #52b3d9;
    overflow: hidden; }
    .skill-item__circle-progress {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 66px;
      background-color: #68c3a3; }
    .skill-item__circle-percent {
      position: relative;
      display: table-cell;
      width: 100%;
      vertical-align: middle;
      color: #494949; 
      z-index: 10;}

<div class="skill-item">
  <div class="skill-item__circle">
    <div class="skill-item__circle-progress" data-percent="66"></div>
    <div class="skill-item__circle-percent">66%</div>
  </div>
  <h4 class="">HTML5 + CSS3</h4>
</div>

Answer 2

只需将 postion: relative; 添加到 .skill-item__circle-percent 即可！

.skill-item__circle-percent {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #494949;
  position: relative;
}

请让我知道您的反馈。谢谢！

.skill-item {
  width: 100px;
  height: 100px;
  text-align: center;
}
.skill-item__title {
  color: #494949;
}
.skill-item__circle {
  border-radius: 50%;
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
  background-color: #52b3d9;
  overflow: hidden;
}
.skill-item__circle-progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 66px;
  background-color: #68c3a3;
}
.skill-item__circle-percent {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  color: #494949;
  position: relative;
}

<div class="skill-item item">
  <div class="skill-item__circle">
    <div class="skill-item__circle-progress" data-percent="66"></div>
    <div class="skill-item__circle-percent">66%</div>
  </div>
  <h4 class="">HTML5 + CSS3</h4>
</div>

编辑： 此解决方案的工作原理是定位元素（非静态）显示在非（静态）元素上方。

绝对定位和 Z-Index 堆叠

Absolute positioning and Z-Index stacking

html

css

z-index

css-position