Skip to main content
Meta-etiqueta removida, mejoras en redacción
Origen Enlace
padaleiana
  • 3.3k
  • 13
  • 19
  • 27

como Cómo traslapar div con z -index en css

Debo realizar un diseño donde tengo cuatro div que se traslapan entre si en las esquinas utilizando positionposition y z-indexz-index, pero no logro conseguir que se traslapen sino 3 quedando uno por fuera, ya utilice. Ya utilicé las diferentes combinaciones de z-index, agradezco a la comunidad con una solucion o alternativa, adjuntoz-index.
Adjunto imagen de comocó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>

como traslapar div con z -index en css

Debo realizar un diseño donde tengo cuatro div que se traslapan entre si en las esquinas utilizando position y z-index, pero no logro conseguir que se traslapen sino 3 quedando uno por fuera, ya utilice las diferentes combinaciones de z-index, agradezco a la comunidad con una solucion o alternativa, adjunto imagen de como 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>

Cómo traslapar div con z -index en css

Debo realizar un diseño donde tengo cuatro div que se traslapan entre 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>

Colocado código en snippet
Origen Enlace
masterguru
  • 16k
  • 5
  • 15
  • 28
       <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>```

   #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; 
}

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

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

   #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; 
}

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

Origen Enlace

como traslapar div con z -index en css

Debo realizar un diseño donde tengo cuatro div que se traslapan entre si en las esquinas utilizando position y z-index, pero no logro conseguir que se traslapen sino 3 quedando uno por fuera, ya utilice las diferentes combinaciones de z-index, agradezco a la comunidad con una solucion o alternativa, adjunto imagen de como deben quedar posicionados los div. Adjunto como debe quedar al final el diseño,

Adjunto mi html y css:

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

   #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; 
}