Necesito apilar divs uno encima del otro, en el centro alineado horizontalmente, dentro de la caja negra.

Tengo esto mucho:

.notification-dot-layer {
    margin: auto;
    width: 48px;
    height: 60px;
    position: relative;
    text-align: center;
    border: 1px solid black;
        text-align: center;
}

    .test {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 4px solid #00ff00;
  transform: translate(-50%);
width: 0px;
  }

.notificationbluedot {
    height: 48px;
    width: 48px;
    background-color: #3a3b7e;
    border-radius: 50%;
    margin: 0 auto;
 }


.notification-dot-text {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
 }
<div class="notification-dot-layer">
<div class="test">
<div class="notificationbluedot">
<div class="notification-dot-text">
55
</div>
</div>
</div>
</div>

Ejecute el fragmento de código para ver los resultados. Desafortunadamente, no puedo colocar el círculo azul con el "55" encima de la línea verde, centrado. Cuando el círculo con el 55 está sobre la línea verde, solo deben mostrarse las partes de la línea verde que quedarían expuestas.

¿Qué me estoy perdiendo?

Necesito que esto funcione en IE11 y Chrome.

0
user3810900 13 nov. 2017 a las 10:12

2 respuestas

La mejor respuesta

Agregue .notificationbluedot {margin-left: -25px ;top:10%;position: absolute;} en su css

.notification-dot-layer {
  margin: auto;
  width: 48px;
  height: 60px;
  position: relative;
  text-align: center;
  border: 1px solid black;
  text-align: center;
}

.test {
  content: "";
  position: absolute;
  z-index: -10;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 4px solid #00ff00;
  transform: translate(-50%);
  width: 0;
  //margin: 5px auto;
 
}

.notificationbluedot {
  height: 48px;
  width: 48px;
  background-color: #3a3b7e;
  border-radius: 50%;
  margin-left: -25px ;
  top:10%;
  position: absolute;
  
}

.notification-dot-text {
  position: relative;
  top: 50%;
 // left: -50%;
  transform: translateY(-50%);
}
<div class="notification-dot-layer">
  <div class="test">
    <div class="notificationbluedot">
      <div class="notification-dot-text">
        55
      </div>
    </div>
  </div>
</div>
-1
Bhargav Chudasama 13 nov. 2017 a las 07:47

Utilice position:absolute en el círculo también para centrarlo, mientras que el verde también está detrás. También hice el círculo como hermano de la línea para eliminar el pequeño espacio en el lado izquierdo

.notification-dot-layer {
  margin: auto;
  width: 48px;
  height: 60px;
  position: relative;
  text-align: center;
  border: 1px solid black;
  text-align: center;
}

.test {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 4px solid #00ff00;
  transform: translate(-50%);
}

.notificationbluedot {
  height: 48px;
  width: 48px;
  background-color: #3a3b7e;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.notification-dot-text {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
<div class="notification-dot-layer">
  <div class="test">
  </div>
  <div class="notificationbluedot">
    <div class="notification-dot-text">
      55
    </div>
  </div>
</div>
0
Carl Binalla 13 nov. 2017 a las 07:31