1

Tengo un scroll cuando posiciono mis dos circulos ESTOY TRABAJANDO EN MOBILE FIRST POR LO QUE EN ESCRITORIO NO FUNCIONA AUN, el primero funciona bien y no hay scroll, pero al posicionar el segundo circulo me sale un scroll lateral e inferior, adjunto mi codigo. He intentado cambiando las posiciones de absolute y relative pero simplemente no consigo hacerlo, intente con z-index pero igual no me funciona, ayuda por favor. El circulo azul debe estar en la esquina superior derecha y el circulo rosado en la esquina inferior derecha.

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html {
   font-size: 62.5%;
}

.background {
   background-color: #101010;
   height: 100vh;
   width: 100vw;
   position: relative;
   z-index: 10000;
}

.circle--blue {
   background: radial-gradient(81.25% 81.25% at 67.32% 18.75%, #17B3A9 0%, #0945DF 100%);
   border-radius: 100%;
   height: 30rem;
   transform: rotate(245deg);
   width: 30rem;
   position: absolute;
   left: -15%;
   top: -10%;
   z-index: 1;

}

.circle--red {
   background: radial-gradient(76.75% 76.75% at 70% 23.25%, #7717B3 0%, #DF09CA 100%);
   height: 20rem;
   width: 20rem;
   border-radius: 100%;
   position: absolute;
   bottom: -10%;
   right: -10%;
   z-index: 2;
}
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title></title>
   <link rel="stylesheet" href="./style.css">
</head>

<body>

   <div class="background">
      <div class="circle--blue"></div>
      <div class="circle--red"></div>
   </div>
</body>

</html>

4
  • @BetaM No del todo ya que segun mi ejemplo mi contenedor padre es relativo y los hijos son absolutos por lo que se supone no debe existir scroll pero aun asi sigue saliendo :( el 16 dic. 2020 a las 22:43
  • 1
    si no deseas scrollers debes usar el atrtibuto overflow asignando hidden en el estilo del contenedor. Pero eso no resuelve el tema de las dimensiones (si necesitas mostrar los círculos completos, cosa a la que no haces referencia). selector { overflow: hidden; } el default es auto muestra los scrollers.
    – quevedo
    el 16 dic. 2020 a las 23:36
  • @quevedo No, los circulos tienen ese aspecto de estar cortados en la version movil, la cual la hago desde mobile first, y si ocupo overflow:hidden el contenido se me mueve nuevamente, obviamente quita el scroll pero quisiera saber si hay alguna solucion que me los mantenga tal cual el 17 dic. 2020 a las 1:27
  • @quevedo permíteme agradecerte, al parecer funcionó, si puedes escribir tu respuesta para poderte dar la respuesta correcta, adjúntala por favor. el 17 dic. 2020 a las 1:31

1 respuesta 1

1

Para ocultar el contenido que desborda un contenedor, de modo que no muestre los scrollers se puede utilizar el atributo overflow del mismo asignando su valor a hidden.

La atribución del estilo se hace mediante la sintaxis:

    selector { overflow: hidden; }

En tu caso se puede aprovechar la clase asignada al contenedor de fondo para que no afecte a otros elementos que puedan estar presentes en la página, así:

    .background { overflow: hidden; }

referencia: Overflow (excedente)

2
  • Gracias compa me ayudó mucho el 17 dic. 2020 a las 3:17
  • Para eso estamos. Hay veces en que los árboles ocultan el bosque.
    – quevedo
    el 17 dic. 2020 a las 3:52

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.