1

Ejemplo de como quiero que quede introducir la descripción de la imagen aquí

de que manera puedo lograr posicionar la caja que esta atras , porque por ejemplo estaba intentandolo con Z-index pero el resultado no me dio igual

introducir la descripción de la imagen aquí

Asi es como yo lo tengo como podrán observar se nota que si esta atras el cuadro login pero el problema es que esta muy visible se nota mucho lo que hay en el cuadro login

cuadro Register
.Box{
  background: rgba(255,255,255,0.9);
  transform: translateX(25rem)translateY(15rem);
  width: 520px;
  height: 390px;
  border-radius: 10px;
  position: absolute;
  z-index: 2;
}

cuadro Login
.Box-2{
  background: rgba(255,255,255,0.9);
  transform: translateX(38rem)translateY(19rem);
  width: 520px;
  height: 390px;
  border-radius: 10px;
  position: absolute;
  z-index: 1;
}
5
  • Usa blur: filter: blur(4px);, esto desenfocara el contenido del fondo pero tendra la misma opacidad. Commented el 21 jun. 2020 a las 20:36
  • tambien pense en eso , pero eso lo dejaría igual solo mas desenfocado
    – John
    Commented el 21 jun. 2020 a las 20:46
  • Entonces quitale la transprencia al fono y hazlo con opacidad, haz una sola clase para los dos cuadros y añade una clase .active para manejar cuando el box este en frente o no, si quieres te hago una respuesta. Commented el 21 jun. 2020 a las 20:56
  • En si ¿cuál es la duda?
    – user128299
    Commented el 21 jun. 2020 a las 21:02
  • mi duda era acerca del z-index y que otras propiedades podia complementarlas para poder obtener el resultado que queria del ejemplo que muestre arriba , @DєηyηCrawford amigo lo del opacity me funciono bien si hay otra forma aparte del opacity tambien puedes ponerla para ver todas las opciones
    – John
    Commented el 21 jun. 2020 a las 21:42

1 respuesta 1

1

Este es un ejemplo de como podrías usar el z-index. Pero para que se veo mas chiquito y por detras, agregas sombreado, opacidad al elemento de por detras y escala.

HTML

<div class="w-40 vh-50 position-relative">
    <div class="w-100 h-100 bg-white d-flex justify-content-center align-items-center block-content primary">
        <a href="#" class="btn btn-primary primary">Boton</a>
    </div>
    <div class="w-100 h-100 bg-white d-flex justify-content-center align-items-center block-content secondary active">
        <a href="#" class="btn btn-primary secondary">Boton</a>
    </div>
</div>

CSS

<style>
.block-content {
    position: absolute;
    box-shadow: 1px 5px 15px rgba(0, 0, 0, .5);
}
.primary {
    z-index: 2;
}
.secondary {
    z-index: 1;
}
.secondary.active {
    left: 20%;
    transform: scale(.8);
    opacity: .8;
}
</style>

Si te sientes perdido con tantas clases, es por que yo he usado Bootstrap aquí, para hacerlo mas rápido.

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.