¿Cómo puedo ocultar un elemento fuera del borde de la pantalla?

4 minutos de lectura

avatar de usuario
lavela

Tengo un div que quiero colocar parcialmente fuera de la pantalla así:

div {
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
    top: 50px;
}

Pero esto aumenta el tamaño de la página, lo que permite que se desplace hacia la derecha. ¿Hay alguna forma de mantener oculta la mitad de este div y evitar el desplazamiento para verlo?

avatar de usuario
jose joe

Sí, solo crea un div adjunto con overflow: hiddencomo esto:

.outer {
  overflow: hidden;
  position: relative;
}
.inner {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}
<div class="outer">
  <div class="inner">
    CONTENT
  </div>
</div>

Ejemplo: http://jsfiddle.net/Uj3eQ/

  • añadir posición: relativa/fija/absoluta; al .exterior

    – Alex Ackermann

    19 de julio de 2011 a las 11:57


  • Nota: el código dado hará que el contenido interno no se muestre en la pantalla. Debe colocar el div externo dentro de su documento como desee y luego el interno position: absolute será relativo al div exterior.

    – Jason Axelson

    21 de abril de 2014 a las 0:07

avatar de usuario
Aaditi Sharma

Solo agrega overflow:hidden a la css. Eso debería hacer el truco.

avatar de usuario
Alex Ackermann

Simplemente inserte este div dentro de otro div con overflow:hidden

Puede agregar una consulta de medios para evitar desplazarse en un punto determinado. Básicamente, tome el ancho de su contenedor principal y cree una consulta de medios de ancho mínimo usando eso.

@media (min-width: 960px) {
    body {
       overflow-x: hidden;
    }
}

Debería funcionar para navegadores modernos.

avatar de usuario
Sami Fouad

Otra solución es usar margin-left: 100%;

Y si quisieras jugar un poco con el posicionamiento, puedes hacer algo como margin-left: calc(100% + 10px);

Y otra forma alternativa es hacer float: right; y luego jugar con margin-right -50px; donde 50px es el ancho del div oculto. Incluso podría tener una transición ordenada si anima el margin-right si estuvieras haciendo un menú.

  • Es una mala idea animar las propiedades relacionadas con el diseño debido a las limitaciones de rendimiento. Es mejor usar el transform: translateX() por tales cosas.

    – Slava Fomin II

    23 de mayo de 2019 a las 13:09

  • @SlavaFominII No, no hay nada de malo en animar los márgenes. Incluso en el móvil. Al igual que con cualquier animación, depende mucho de cómo lo hagas. Aquí hay un violín con ambos métodos uno al lado del otro, además de algunas pequeñas diferencias de aceleración, es casi idéntico. Incluso puede abrir el perfil de la CPU en las herramientas de desarrollo y comprobarlo usted mismo: jsfiddle.net/rock6zLq

    – Sami Fouad

    16 de marzo de 2021 a las 11:09


avatar de usuario
marca1270287

Tuve una situación similar en la que necesitaba que un elemento absolutamente colocado se colocara parcialmente a la derecha del encabezado del contenido principal. Si el navegador era lo suficientemente ancho para mostrarlo, NO quería recortarlo (desbordamiento: oculto;) pero tampoco quería que apareciera la barra de desplazamiento si el navegador no era lo suficientemente ancho.

Aquí está el código que usé:

@media screen and (max-width: 1275px) {
  #header {
     overflow-x: hidden;
  }
}

  • Es una mala idea animar las propiedades relacionadas con el diseño debido a las limitaciones de rendimiento. Es mejor usar el transform: translateX() por tales cosas.

    – Slava Fomin II

    23 de mayo de 2019 a las 13:09

  • @SlavaFominII No, no hay nada de malo en animar los márgenes. Incluso en el móvil. Al igual que con cualquier animación, depende mucho de cómo lo hagas. Aquí hay un violín con ambos métodos uno al lado del otro, además de algunas pequeñas diferencias de aceleración, es casi idéntico. Incluso puede abrir el perfil de la CPU en las herramientas de desarrollo y comprobarlo usted mismo: jsfiddle.net/rock6zLq

    – Sami Fouad

    16 de marzo de 2021 a las 11:09


avatar de usuario
monje

el desplazamiento puede deberse a que ha colocado la propiedad de posición relativa en el div que lo contiene y da como resultado que el div requerido se salga de la derecha en -50, pero en relación con el div principal que contiene, no el área visible del navegador … si su div principal está justo dentro del la etiqueta del cuerpo o el div principal no incluye ninguna propiedad de posición, su código debería funcionar … y nuevamente puede aplicar desbordamiento: propiedad oculta al div contenedor para ocultar la parte innecesaria

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad