CROSP CROSP - 3 months ago 10
CSS Question

Absolute positioning and Z-Index stacking

I am trying to recreate so called

skill-cirle
which is popular in CV templates.

Like this

enter image description here

I am trying to achieve this using following code, I hope you will get an idea.

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>


Here is my result

enter image description here

And JSFiddle Link

As you can see my
absolute positioned
block overlays text block, but I need this to work vice versa. Percent text with stacked on top of the
background progress block
.

How can I achieve this ?

I would be grateful for any help or suggestion how to do this better.

Answer

Just add postion: relative; to .skill-item__circle-percent and there you go!

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

Please let me know your feedback. Thanks!

.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>

EDIT: This solution works as positioned elements (that are not static) are displayed above the elements that are not (static).

Comments