elementos de lugar con múltiples estilos superposición [duplicado]

Necesito ayuda para poner mis artículos. Estoy empezando así que necesito explicaciones. Lo que parece obvio para usted, no será necesariamente para mí:) Tengo un encabezado que quiero mejorar. Me gustaría que las dos imágenes en el derecho a ser superpuestas, es decir, el botón "reserve" está por encima de la imagen. Por otro lado, me gustaría llegar al centro de la imagen media. Sé que los estilos están superpuestos y los cambios que intenté a través de la consola de cromo no funcionan. No puedo imponer el estilo que quiero y no puedo encontrar necesariamente el estilo que me bloquea. Si es posible que me des un consejo que sería genial. Gracias.

El enlace es : https://hotel-restaurant-la-borie.fr/

HEADER

HEADER


    

        
Hotel LOGIS LA BORIE en Périgord Noir
          
            
    
Tel. +33 (0 53 28 97 60

                
              
                    

                        

                            
                                lien de réservation
                            
                        

                        
  
                            

                                
                                    lien de réservation

Si agregotransformar: traducirX(calc(100% + 10px)) al botón "reservir" me da:

image

Quería usar el div que contiene tanto imágenes como enlaces como puedes ver en mi código y poner la pantalla : bloque pero no funciona tenerlo uno encima del otro ... Las imágenes están incluidas en un enlace así que si cambio sólo el estilo del img las estancias en su lugar.

Pregunta hecha hace 3 años, 4 meses, 29 días - Por bitcraftsman

4 Respuestas:

  • Lo siento, debo explicar mejor, aquí hay un ejemplo de lo que digo

    
    
    
        
    Hotel LOGIS LA BORIE en Périgord Noir
              
            
    
    Tel. +33 (0 53 28 97 60
    
                
                  
                    
    
                        
    
                            
                                lien de réservation
                            
                        
    
                        
      
                            
    
                                
                                    lien de réservation

    Respondida el Dec 17, 2020 a las 08:16 - por scriptsculptor

    Votos positivos: 0 | Votos negativos: 0

  • podría traducir la imagen usando css

    img{
  transform: translateX(calc(100% + 10px))
}

    el código mueve la imagen a la derecha por 100% + 10px por ejemplo

    o tratar de poner las dos imágenes en la misma etiqueta a continuación añadir al botón superior reservez:

    bottom:0
z-index:1

    esto lo pondrá en la parte inferior y delantera

    Respondida el Dec 17, 2020 a las 08:24 - por rubyrogue

    Votos positivos: 0 | Votos negativos: 0

  • El código proporcionado presenta un error ya que no está correctamente estructurado y contiene elementos de lugar con múltiples estilos superpuestos. Para corregir este error y lograr que el botón "reserve" esté superpuesto a la imagen, puedes seguir estos pasos:

    • Envuelve el contenido que deseas superponer en un contenedor con posición relativa.
    • Aplica posicionamiento absoluto al elemento que deseas superponer (en este caso, el botón "reserve").
    • Ajusta las propiedades de posición (top, left, right, bottom) del elemento superpuesto para posicionarlo encima de la imagen.

    Aquí tienes un ejemplo de cómo podrías aplicar este concepto al código proporcionado:

    html

    
    
    
        
    Hotel LOGIS LA BORIE en Périgord Noir
    
        
        
    Tel. +33 (0 53 28 97 60
    
        
     
            
    
                
                    lien de réservation
                
            
    
            
    
                
    
                    
                        
                        lien de réservation

    Al aplicar estos cambios, el botón "reserve" debería superponerse a la imagen como se deseaba. Recuerda ajustar las propiedades de posición según tu diseño específico.

    Respondida el Dec 18, 2020 a las 08:14 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Superposición de imágenes:

    Para superponer la imagen del botón "reservar" sobre la otra imagen, puedes usar position: absolute. Esto sacará la imagen del flujo normal del documento y te permitirá colocarla en una posición específica sobre la otra imagen.

    css
/ Imagen del botón "reservar" /
.form-reservation img {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
}

    Centrar imagen:

    Para centrar la imagen del medio, puedes usar margin: 0 auto. Esto centrará la imagen horizontalmente dentro de su contenedor.

    css
/ Imagen del medio /
.logo-main img {
  margin: 0 auto;
}

    Estilo superpuesto:

    Para anular cualquier estilo superpuesto, puedes usar !important en tu declaración de estilo. Sin embargo, esto debe usarse con moderación, ya que puede dificultar la depuración y el mantenimiento del código.

    css
/ Anular estilo superpuesto /
.form-reservation img {
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 10px) !important;
}

    Otros consejos:

    Inspecciona los elementos en la consola del navegador para ver los estilos aplicados. Usa herramientas de desarrollo como Chrome DevTools para editar estilos sobre la marcha y ver los resultados en tiempo real. Intenta simplificar tu código eliminando estilos innecesarios o contenedores anidados.

    Código actualizado:

    css
/ Imagen del botón "reservar" /
.form-reservation img {
  position: absolute !important;
  top: 0 !important;
  left: calc(100% + 10px) !important;
}

/ Imagen del medio */
.logo-main img {
  margin: 0 auto !important;
}

    Respondida el Dec 18, 2020 a las 08:21 - por Gemini

    Votos positivos: 0 | Votos negativos: 0