3

Estoy usando bootstrap v4.1.3 para desarrollar la visualidad de la página web y estoy usando su sistema de rejillas para acomodar los elementos. tengo la pantalla dividida en dos usando container-fluid y col-6. En el primer col-6 tengo una serie de elementos y en el segundo col-6 tengo una imagen. La cuestión es que deseo que los elementos que están en la primera parte debe superponerse a los que están en la segunda. De la forma que se muestra en la imagen imagen de ejemplo El elemento naranja se encuentra en el elemento amarillo (el primer col-6) y debe superponerse al elemento azul (el segundo col-6)

.seccion {
    background-color: rgba(255, 200, 100, 80%);
    padding-left: 15rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10rem;
    width: calc(100vw - 25%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-6">
            <h1>Encabezado</h1>
            <div class="seccion">
                <div class="sub">
                    <p>texto 1</p>
                </div>
                <div class="sub">
                    <p>texto 1</p>
                </div>
                <div class="sub">
                    <p>texto 1</p>
                </div>
                <div class="sub">
                    <p>texto 1</p>
                </div>
                <div class="sub">
                    <p>texto 1</p>
                </div>
                <div class="sub">
                    <p>texto 1</p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <img src="https://images.unsplash.com/photo-1517213849290-bbbfffdc6da3?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=416&h=312&q=60 1x, https://images.unsplash.com/photo-1517213849290-bbbfffdc6da3?ixlib=rb-1.2.1&dpr=2&auto=format&fit=crop&w=416&h=312&q=60 2x">
        </div>
    </div>
</div>

1 respuesta 1

5

Para cambiar el orden de los elementos se usa z-index. El valor debe ser auto o un número entero. Un elemento con mayor valor cubre a otro con menor valor así que debes especificar un número mayor que 0 y distinto de auto.

El problema radica entonces que tu elemento con clase seccion no es un elemento posicionado y por lo tanto la propiedad z-index no tiene efecto. El elemento no puede ser estático para que funcione y la mejor forma de lograrlo es usando position: relative que lo convertirá en posicionado pero lo dejará en el mismo lugar siempre que no modifiques ningún valor de posicionado como left, right, top, etc.

.seccion {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 200, 100, 80%);
  padding-left: 15rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10rem;
  width: calc(100vw - 25%);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-6">
      <h1>Encabezado</h1>
      <div class="seccion">
        <div class="sub">
          <p>texto 1</p>
        </div>
        <div class="sub">
          <p>texto 1</p>
        </div>
        <div class="sub">
          <p>texto 1</p>
        </div>
        <div class="sub">
          <p>texto 1</p>
        </div>
        <div class="sub">
          <p>texto 1</p>
        </div>
        <div class="sub">
          <p>texto 1</p>
        </div>
      </div>
    </div>
    <div class="col-6">
      <img src="https://images.unsplash.com/photo-1517213849290-bbbfffdc6da3?ixlib=rb-1.2.1&dpr=1&auto=format&fit=crop&w=416&h=312&q=60 1x, https://images.unsplash.com/photo-1517213849290-bbbfffdc6da3?ixlib=rb-1.2.1&dpr=2&auto=format&fit=crop&w=416&h=312&q=60 2x">
    </div>
  </div>
</div>

1
  • Muchas gracias, hoy aprendí algo nuevo :D el 10 dic. 2019 a las 15:12

Tu Respuesta

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

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