Skip to main content
3 de 9
se eliminaron 16 caracteres en el cuerpo

Alineacion de 4 divs en 2 columnas con contenido aparte y z-index. HTML | CSS

Update (leer mas abajo).

Estoy realizando esta alineación de divs con respecto a un contenido aparte que esta posicionada detrás de los divs que quiere alinear:

Me explico:

Div principal: Este div tiene oculto otro div que se desplaza con una pequeña animación con Jquery, si pulsas en la flecha blanca se desplaza su contenido (que es el otro div), igualmente si quieres cerrarlo se oculta si vuelves a pulsar. En Realidad uso Z-index para poder manejar estos 2 elementos.

DIV 1 Div desplazado

Ahora me gustaría lograr algo como lo que les muestro en la siguiente imagen. La cosa es poder posicionar los recuadros tanto el como el con el div con el contenido (siendo este le que esta detras).

Realmente he logrado posicionar los 2 primeros recuadros, pero cuando voy a colocar otros 2 en la siguiente fila, se me descuadran y se desacomoda todo, he intendo colocarlos con contenedor individuales pero no resulta.

logro Estructura HTML:

      <section>
             <h2>Services</h2>
        <div id="contain" class="contenedor">
            <div class="contenedorICON">
                    <div class="icon" id="Wirefrime">       
    <i class="fas fa-ruler-horizontal"></i>
                </div>
<div class="arrow"><i class="fas fa-sort-down" class="animate"></i>
        </div>
                <div class="contenedorp">   
                    <div class="parrafo">
                        <h4>Wirefrime</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugiat quisquam asperiores autem tempore.
                    </div>
                    </div>              
        </div> 
        <div class="contenedorICON"> 
                <div class="icon" id="Web-Design">
                                <i class="fas fa-ruler-horizontal" id="iconD"></i>
                </div>
       <div class="arrow"><i class="fas fa-sort-down" class="animate"></i>
                </div>
                <div class="contenedorp">
                    <div class="parrafo">
                        <h4>Web design</h4>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam fugiat quisquam asperiores autem tempore.
                    </div>                          
                    </div>              
                </div>
                </div>
            </section>

CSS:

.icon {
    text-align: center;
    height: 183px;
    width: 51%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99;
    font-size: 28px;
    border-radius: 15px;
    transition: 0.5s;
    position: absolute;
}
#contain {
    display: flex;
    padding-top: 36px;
    height: 99%;
    width: 72%;
    align-items: center;
    justify-content: center;
}
.contenedorICON {
    width: 100%;
    position: relative;
    z-index: 1;
    height: 35%;
    left: 82px;
    margin: auto;
    padding: 0;
}
.contenedorp {
    position: relative;
    width: 91%;
    top: 4px;
    bottom: 30px;
    left: -72px;
    margin: 0;
    display: flex;
}
.parrafo {
    width: 55%;
    background: linear-gradient(rgb(208, 130, 30) , rgb(208, 66, 10));
    padding: 27px 25px;
    text-align: center;
    transition: 0.5s;
    font-size: 13px;
    top: 16px;
    margin: auto;
    height: 32%;
}
.arrow {
    color: #fff;
    font-size: 29px;
    cursor: pointer;
    transition: 0.5s;
    transform: translateX(-55%);
    width: 67px;
    text-align: center;
    z-index: 585;
    bottom: -3px;
    left: 4px;
    position: absolute;
    bottom: 44px;
    left: 100px;
    right: 0;
}

Alguno usuario de este foro, podria orientarme a como hacerlo? Igualmente acepto sugerencias del código por que no se si mi idea sea la mas correcta para hacerlo.

Gracias!

Update: Pude acomodar los divs, gracias a la sugerencia del usuario pero ahora tengo un pequeño problema con el posicionamiento de los items con z-index

Mi nueva estructura HTML (resumida): La clase grid-container es una clase que envuelve a todo el contenido que tengo dentro de las siguientes clases, que son los cuatro recuadros con sus respectivos contenidos posicionados detras de los principales.

<div  class="grid-container"> <!--Contenedor envolvente-->

              <div class="grid-item"> <!--Contenedor principal-->
<i class="fas fa-ruler-horizontal"></i>
<div class="arrow1"> <!--Contenedor para icono, aca establezco un color para cada uno-->
    <i class="fas fa-angle-down"></i>
  </div>

    <div class="contain-child"> <--!Contenedor para los parrafos.-->

        <div class="grid-item-child">2</div> <!--Hijos-->

        </div>
   
           </div>
           </div>

Ahora

Ahora cuando hago la animación (consta de desplazar el div lentamente). con mi funcion jquery, el div con la clase (contain-child) se superpone al div principal y lo que quiere es que se ponga detras del contenedor naranja.

Si le doy a la flecha para ocultar el parrafo, este si lo hace

En este punto el div se empiza a subir, ocultandose detras del recuadro naranja. introducir la descripción de la imagen aquí

CSS:

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 170px);
    padding: 30px;
    grid-gap: 73px 157px;
    position: absolute;
    z-index: 0;
}
.grid-item {
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 40px;
    font-size: 30px;
    text-align: center;
    width: 218px;
    position: relative;
    background: linear-gradient(rgb(208, 130, 30) , rgb(208, 66, 10));
    border-radius: 12px;
Z-index: 99;
}
.grid-item-child {
    width: 217px;
    height: 100%;
    background: linear-gradient(rgba(1596, 223, 167, 0.88) , rgba(149, 45, 40, 0.66));
    border-radius: 11px;
}
.contain-child {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
        transition: 0.5s;
}