Tenemos la mejor respuesta que encontramos en línea. Nuestro deseo es que te sea de mucha utilidad y si deseas aportar alguna mejora hazlo libremente.
Solución:
Creo que sé de dónde viene esta pregunta. Debe confundirse con las personas que utilizan el posicionamiento absoluto (negativo) en el lado IZQUIERDO de la pantalla cuando quieren que un elemento esté fuera de la pantalla SIN barras de desplazamiento horizontales. Esta es una técnica común para controles deslizantes, menús y modales.
El caso es que una alineación IZQUIERDA negativa NO muestra desbordamiento en el cuerpo, mientras que una alineación derecha negativa sí lo hace. No es muy lógico … lo sé.
Para ilustrar esto, creé un bolígrafo con el elemento absoluto a la izquierda: left: -100px; http://codepen.io/anon/pen/vGRxdJ y un bolígrafo con el elemento absoluto a la derecha: right: -100px; http://codepen.io/anon/pen/jqzBZd.
Espero que esto elimine tu confusión.
En cuanto a por qué sucede esto: siempre he entendido que la esquina superior izquierda de la pantalla es x: 0, y: 0: el origen de un sistema de coordenadas que consta solo de valores positivos (que se refleja horizontalmente en el caso RTL). Los valores negativos en este sistema de coordenadas están “fuera del lienzo” y, por lo tanto, no necesitan barra de desplazamiento, mientras que los elementos “en el lienzo” sí. En otras palabras: los elementos en el lienzo agrandarán su página y harán que su vista se pueda desplazar automáticamente (a menos que se indique lo contrario), mientras que los elementos fuera del lienzo no lo harán.
absolute: el elemento se elimina del flujo del documento y otros elementos se comportarán como si ni siquiera estuviera allí, mientras que todas las demás propiedades posicionales funcionarán en él.
Trucos CSS
Esto significa que el diseño de la página y el tamaño y la posición de otros elementos no cambiarán. El ancho de la página cambia, como hemos visto, pero eso no se llama diseño.
El diseño de la página es la parte del diseño gráfico que se ocupa de la disposición de los elementos visuales en una página. Por lo general, implica principios organizativos de composición. […]
Wikipedia
Cuando cambia el ancho, la composición de los elementos no cambia (al menos, en este caso), por lo que el diseño no cambia. El ancho cambia, pero se supone que esto debe suceder. Si ahora se está preguntando: “¿Pero por qué?”, Lea el siguiente fragmento.
Acerca de las preguntas de “por qué”: No siempre hay un por qué real; así es, y o lo usas o te quedas quieto y lo cuestionas. Tampoco es un gran problema. Los elementos no pudiendo desbordar la ventana, eso sería un problema. Más sobre preguntas de “por qué”. No estoy diciendo que todas las preguntas de “por qué” sean malas, pero si pregunta si una determinada característica debería existir, es posible que no haya una buena respuesta, sino sólo una buena o suficiente solución.
Solución: agregar overflow-x: hidden al CSS del cuerpo. Cuando lo agregas a .relative, una parte diferente de .absolute será cortado también, porque .absolute tiene mas altura.
Cuando agregas overflow-x:hidden todo fuera del body con ancho completo será invisible y, por lo tanto, no estirará la página.
body
overflow-x:hidden;
.relative
position: relative;
.absolute
position: absolute;
right: -100px;
width: 200px;
height: 100px;
background: grey;
Lo que está esperando lo puede hacer con dos cosas. O hacer body overflow-x: hidden; O hacer absolute div a position:fixed.
Ahora responde tu pregunta.
Pregunta: ¿Por qué todavía hace que la página se desborde?
Porque position:absolute está posicionado en relación con el antepasado posicionado más cercano.
Y position:absolute div hará que se desplace hacia la derecha o hacia abajo si se desborda hacia la derecha / abajo.
Cheque Violín
Donde position:fixed se coloca en relación con la ventana gráfica. No se desbordará en ningún lado izquierdo / superior / inferior / derecho. Violín
Aquí algunos enlaces para explicar la posición.
Posicionamiento absoluto: esto se desplazará, pero está fuera de flujo de página. Generalmente se mueve de la posición original.
Posicionamiento fijo: NO se desplazará y está fuera de flujo. Generalmente se mueve de la posición original.
Referencia
body
overflow-x: hidden;
.relative
position: relative;
background: pink;
.absolute
position: absolute;
top: 0;
right: -100px;
width: 200px;
height: 100px;
background: rgba(0,0,0,.5);
Placeholder
Espero eso ayude.
Eres capaz de proteger nuestra función fijando un comentario o dejando una puntuación te estamos agradecidos.