Z-Index Code Front - CSS to change z-index when element is active

Z-Index Code Front - CSS to change z-index when element is active Demo

View Demo Full Screen View Demo New Tab

Z-Index Code Front - CSS to change z-index when element is active Code

HTML

<div class="wrapper">
  <div class="ele ele1"></div>
  <div class="ele ele2"></div>
  <p>If you have 2 elements and they over lap and then you add a click event then it can become complex. So this script adds some z-index changing order to bring the active dot to the front. Mouse over the elements and they should come to the front as they are active. </p>
</div>

CSS

.wrapper p {
  font-family:"Open Sans", sans-serif;
  color:#CCC;
}
.wrapper {
  position:relative;
  height:400px;
  width:600px;
  border-radius:10px;
  background:#000;
  padding:30px;
}
.ele {
  z-index:5;
  border-radius:40px;
  height:80px;
  width:80px;
  position: absolute;
}
.ele1:hover, 
.ele1:active 
{
  z-index:6;
}
.ele1 {
  background:pink;
  top:140px;
  left:20px;
}
.ele2 {
  background:teal;
  top:140px;
  left:70px;
}
.ele2:hover, 
.ele2:active 
{
  z-index:6;
}