Question

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

喜欢这个

我正在尝试使用以下代码实现此目的，我希望您能得到一个想法。

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堆叠

2 个答案: