0

From the W3C Website

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).

But when I position an element absolutely, and it's overflowing outside of the view, it creates a horizontal scrollbar. Why? Am I understanding the specs wrong?

And is there a way to prevent this scrollbar from appearing without using overflow-x: hidden; on the body element?

Swen
  • 767
  • 1
  • 9
  • 31
  • There are many answers - http://stackoverflow.com/q/36531708/483779 – Stickers Nov 25 '16 at 16:32
  • _[…]It has no impact on later siblings_, this is correct, but if it's overflowing outside the body, your browser default behaviour will be to add scrollbars to help reach this element. So I'd guess the answer is **no**, there's no way to prevent the scrollbars without `overflow-x: hidden;` (but, this could be added to any container, not necessarily the `body`) – Jordi Nebot Nov 25 '16 at 16:32
  • 1
    Yes, there is. Position it absolutely (no left or right values) but use a CSS transform to push it off the page. - https://jsfiddle.net/wss6Lsy0/ – Paulie_D Nov 25 '16 at 17:12
  • @Paulie_D I tried using your transform solution but it still adds a horizontal scrollbar. – Swen Nov 28 '16 at 15:31
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Nov 28 '16 at 15:33

1 Answers1

0

Depending on what’s your goal, one option is to use an absolutely positioned wrapper with overflow: hidden; width: 100% and then position your elements (e. g. shadows on each side of the centered container wrapping the entire page contents) inside this wrapper.

Marat Tanalin
  • 13,927
  • 1
  • 36
  • 52
  • I went with the `overflow-x: hidden;` solution in combination with media query breakpoints. That being said I cannot accept this as an answer to my initial question, which was asking for a solution that **doesn't** use `overflow: hidden;` – Swen Dec 02 '16 at 00:31
  • Fwiw, in your question you said about the `BODY` element (`overflow: hidden` for `BODY` is indeed generally harmful) while my answer suggests using `overflow: hidden` for a _separate_ element (which is typically harmless if used for purely decorative purposes), but since you haven’t provided details about your specific task (feel free to do this now or later), we cannot say for sure what is applicable in your case. – Marat Tanalin Dec 02 '16 at 00:49