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