2

Debo realizar un diseño donde tengo cuatro div que se traslapan entre sí en las esquinas utilizando position y z-index, pero no logro conseguir que se traslapen sino 3 quedando uno por fuera. Ya utilicé las diferentes combinaciones de z-index.
Adjunto imagen de cómo deben quedar posicionados los div. Adjunto como debe quedar al final el diseño,

Adjunto mi html y css:

#contenedor {
  height: 500px;
  width: 500px;
  background-color: white;
  padding-left: 15px;
  padding-top: 15px;
}

.cuadro {
  width: 215px;
  height: 230px;
  border: 2px solid black;
  border-radius: 2px;
}

#div1 {
  margin: auto;
  position: relative;
  background-color: #00D8FF;
  z-index: 10;
}

#div2 {
  margin-top: -93px;
  position: relative;
  float: left;
  background-color: #25FE01;
  border-radius: 2px;
  z-index: 8;
}

#div3 {
  margin-top: -93px;
  position: relative;
  float: right;
  background-color: #F7FE00;
  z-index: 7;
}

#div4 {
  margin: auto;
  position: relative;
  margin-top: 53px;
  background-color: #FE69F9;
  z-index: 20;
}
<div id="contenedor">
  <div id="div1" class="cuadro"></div>
  <div id="div2" class="cuadro"></div>
  <div id="div3" class="cuadro"></div>
  <div id="div4" class="cuadro"></div>
</div>

2 respuestas 2

4

Debido al comportamiento cíclico de los cuadros, es imposible hacer lo que deseas solo con z-index pero puedes lograrlo de otra manera. El truco está en utilizar un pseudo elemento en el cuadrado azul que se superponga al cuadrado verde: introducir la descripción de la imagen aquí

Usando un pseudoelemento ::after quedaría:

#contenedor {
    height: 500px;
    width: 500px;
    background-color: white;
    padding-left: 15px;
    padding-top: 15px;
}

.cuadro {
    width: 215px;
    height: 230px;
    border: 2px solid black;
    border-radius: 2px;
}

#div1 {
    margin: auto;
    position: relative;
    background-color: #00D8FF;
}

#div1::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 50%;
    background-color: #00D8FF;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    margin: 0 0 -2px -2px;
    box-sizing: border-box;
    z-index: 10;
    border-radius: 2px;
}

#div2 {
    margin-top: -93px;
    position: relative;
    float: left;
    background-color: #25FE01;
    border-radius: 2px;
    z-index: 4;
}

#div3 {
    margin-top: -93px;
    position: relative;
    float: right;
    background-color: #F7FE00;
    z-index: 2;
}

#div4 {
    margin: auto;
    position: relative;
    margin-top: 53px;
    background-color: #FE69F9;
    z-index: 3;
}
<div id="contenedor">
      <div id="div1" class="cuadro"></div>
      <div id="div2" class="cuadro"></div>
      <div id="div3" class="cuadro"></div>
      <div id="div4" class="cuadro"></div>
</div>

0

La solución que te comparto es que yo creé un 5o div y está sobrepuesto al 4o div y con un z-index mayor al 1er div. Para ello jugué con las coordenadas del "Position: absolute".

Espero te ayude. $4|u)0$

#contenedor {
  height: 500px;
  width: 500px;
  background-color: white;
  padding-left: 15px;
  padding-top: 15px;
  position: relative;
}
.cuadro {
  width: 215px;
  height: 230px;
  border: 2px solid black;
  border-radius: 2px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}
.div1 {
    top: 0;
    left: 150px;
  background-color: #00D8FF;
  z-index: 4;
}
.div2 {
    top: 150px;
    left: 0;
  background-color: #25FE01;
  z-index: 3;
}
.div3 {
    top: 300px;
    left: 150px;
  background-color: #FE69F9;
  z-index: 2;
}
.div4 {
    top: 150px;
    left: 300px;
  background-color: #F7FE00;
  z-index: 1;
}
.div5 {
    top: 150px;
    left: 300px;
    height: 100px;
    border-bottom: none;
  background-color: #F7FE00;
  z-index: 5;
}
<body>
    <div id="contenedor">
      <div class="cuadro div1">1</div>
      <div class="cuadro div2">2</div>
      <div class="cuadro div3">3</div>
      <div class="cuadro div4">4</div>
      <div class="cuadro div5"></div>
    </div>
</body>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.