0

introducir la descripción de la imagen aquí

las imágenes en rosa (kittycakes_designsystem-03-left.png, designsystem-03-right.png" )están sobre los iconos de redes sociales que son links y no me permiten dar click sobre ellos esto esta hecho en Bootstrap necesito acomodarlas debajo de los botones para poder dar click, mas que una respuesta necesito documentación sobre ello.

        <div class="row text-center">
            <div class="col">                   
            </div>
                <div class="col ">
                    <div class="row text-center mx-auto">
                        <div class="col ">
                            <a href=""><img src="assets/img/whatsapp.png" alt=""></a>
                        </div>
                        <div class="col">
                            <a href=""><img src="assets/img/whatsapp.png" alt=""></a>
                            <div class="row text-center">
                                <p class="mx-auto mt-5">Kitty Cakes Pastelitos 2022</p>
                            </div>
                        </div>
                        <div class="col">
                            <a href=""><img src="assets/img/whatsapp.png" alt=""></a>
                        </div>
                    </div>
                </div>                    
            
            <div class="col">                    
            </div>
            <div class="row overlay-footer">
                <div class="col-6">
                    <img src="assets/img/kittycakes_designsystem-03-left.png" 
                    class="float-left" alt="" width="864px">
                </div>
                <div class="col-6">
                    <img src="assets/img/kittycakes_designsystem-03-right.png"
                    class="float-right"  alt="" width="864px">
                </div>
            </div>                
        </div>
    </div>
</footer>
1
  • Bienvenido Luis, por favor agrega un ejemplo mínimo verificable para poder ayudarte. Ya tienes unas respuestas, pero yo no tocaría el z-index ni agregaría posiciones absolutas en estilos in-line. Una mejor opción es convertir esas imágenes a backgrounds de los contenedores que ya tienes definidos. Añade un código reproducible dando clic en editar para darte una respuesta. Commented el 27 ene. 2022 a las 22:52

2 respuestas 2

1

Hola en CSS existe una propiedad llamada z-index, la cual indica el orden de un elemento posicionado y sus descendientes. Cuando varios elementos se superponen, los elementos con mayor valor z-index cubren aquellos con menor valor.En bootstrap también puedes modificar los estilos predefinidos.

Varios componentes de Bootstrap utilizan z-index, la propiedad CSS que ayuda a controlar el diseño al proporcionar un tercer eje para organizar el contenido. Utilizamos una escala de índice z predeterminada en Bootstrap que ha sido diseñada para capas de navegación, información sobre herramientas y ventanas emergentes, modales y más.

Estos valores más altos comienzan en un número arbitrario, lo suficientemente alto y específico para evitar idealmente conflictos. Necesitamos un conjunto estándar de estos en todos nuestros componentes en capas (información sobre herramientas, ventanas emergentes, barras de navegación, menús desplegables, modales) para que podamos ser razonablemente consistentes en los comportamientos. No hay motivo por el que no hayamos podido usar 100+ o 500+.


    $zindex-dropdown:                   1000;
    $zindex-sticky:                     1020;
    $zindex-fixed:                      1030;
    $zindex-modal-backdrop:             1040;
    $zindex-offcanvas:                  1050;
    $zindex-modal:                      1060;
    $zindex-popover:                    1070;
    $zindex-tooltip:                    1080;

Fuente: CSS-MDN, Bootstrapv5.0

0

Puedes poner la division donde tienes los a como position:absolute y un z-index algo alto:

<div class="text-center">
        <div class="row text-center mx-auto" style="position: absolute;width: 100%; z-index: 100;">
            <div class="col ">
                <a href=""><img src="assets/img/whatsapp.png" alt=""></a>
            </div>
            <div class="col">
                <a href=""><img src="assets/img/whatsapp.png" alt=""></a>
                <div class="row text-center">
                    <p class="mx-auto mt-5">Kitty Cakes Pastelitos 2022</p>
                </div>
            </div>
            <div class="col">
                <a href=""><img src="assets/img/whatsapp.png" alt=""></a>
            </div>
        </div>
        <div class="row overlay-footer">
            <div class="col-6">
                <img src="assets/img/kittycakes_designsystem-03-left.png" 
                class="float-left" alt="" width="864px">
            </div>
            <div class="col-6">
                <img src="assets/img/kittycakes_designsystem-03-right.png"
                class="float-right"  alt="" width="864px">
            </div>
        </div>                
</div>

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.