Position absolute not always removed from flow?

N

Nik Coughlin

Why does a page behave differently with an element styled:

position: absolute;
left: -128px;

from the page with:

position: absolute:
right: -128px;

In the first case the absolutely positioned element is removed from the page
flow as expected, in the second case it's not. Examples:

http://nrkn.com/posAbsProblem/leftOnly.html

http://nrkn.com/posAbsProblem/rightOnly.html

You can see that when you resize the browser below a certain point the right
positioned element causes a horizontal scrollbar but the left positioned
element doesn't.

For further illumination, here is the same page with both left and right
positioned elements:
http://nrkn.com/posAbsProblem/index.html

Behaves the same as the page with only the right positioned element. And
the page with just the left behaves the same as a page with no positioned
elements:

http://nrkn.com/posAbsProblem/noBackgrounds.html

CSS is here:

http://nrkn.com/posAbsProblem/layout/main.css

The intention of all this is that the positioned elements are shown when
there is spare room for them, but disappear out of the viewport to make room
for the content if necessary, without creating a horizontal scrollbar.

Any idea of why this happens? As it happened in all the browsers I checked*
it is clearly supposed to work like this but I was under the impression that
absolutely positioning an element removes it from the page flow and I can't
see why in this example the left doesn't cause scrollbars but the right
does, with the only difference between them being whether it is positioned
left or right.

FF, Opera, Safari. Didn't try IE.
 
B

Bergamot

Ben said:
The BBC news site for example used a
huge negative text-indent to whisk away text labels that it replaced
with images.

The idea is, no CSS and you get the text, otherwise the images.

Except when image loading is disabled (but CSS enabled), then you get
nothing at all. Sweet.
Much better to use display: none to achieve this.

No, it is not better. There are some potentially serious accessibility
problems any time you use display:none. Use with caution.

BTW, this is just one of several image replacement methods. I don't know
of any that are problem-free, and most suck when it comes to CSS enabled
and images disabled.
 
J

Jonathan N. Little

Ben said:
That's the problem: people do that. The BBC news site for example used a
huge negative text-indent to whisk away text labels that it replaced
with images.

The idea is, no CSS and you get the text, otherwise the images.

But in a conforming browser you get a scrollbar and can scroll 10000px
to the left and find the text links sitting there looking sorry for
themselves.

Much better to use display: none to achieve this.

Well not necessarily. When a negative margin or position is use to
"pop" an element into view with, the CSS popup, it does not trigger the
page to reflow whereas toggling display property can in some browsers.
 
J

Jonathan N. Little

Ben said:
I was thinking of the simple case where you have a text label that you
just want nobody to see (or hear) if they are using the stylesheet. No
plans to pop it back up.

Then yes, display none. Possible use, things that are only displayed
when printing.
 
B

Bergamot

Ed said:
Bergamot scribed:

Thanks. I read it. Are we suggesting that for accessibility reasons,
everything should always be 'visible,' even content that is event triggered?

No, that's not what it means. It does mean that display:none and
visibility:hidden have side effects you might not have considered. So
start considering them and act accordingly.
 
A

Andy Dingley

No, that's not what it means. It does mean that display:none and
visibility:hidden have side effects you might not have considered.

What _is_ the "side effect" of display:none;?

"Not being displayed" isn't a side effect!
 
B

Bergamot

Andy said:
What _is_ the "side effect" of display:none;?

"Not being displayed" isn't a side effect!

In the case of image replacement methods, which was the example that
started this subthread, plain text was positioned out of sight off left
so a background image would be seen in its stead.

The suggestion was to use display:none for the text instead.

A screen reader will still be able to "see" the text in the first
method, but not the second. That is the kind of side effect I was
referring to.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top