CODEWITHSUNDEEP
htmlcss
user5476567
user5476567

Reputation:

Why position changing depending on opacity

I am trying to understand positioning and regarding absolute I have a problem.

For what I understand, absolutely positioned elements are completely removed from the normal document flow. As far as the elements around them are concerned the absolutely positioned element doesn’t exist.

Then, they are positioned in relation to the first parent element it has that doesn't have position: static;. If there's no such element, the element with position: absolute gets positioned relative to <html>.

So here I have created a fiddle with 3 different divs, each of them with one color. All three have an opacity of 0.5. --> https://jsfiddle.net/uwqoy4zh/

When I set the second div to position: absolute, he is removed from the flow and therefore I see the pink one on its place --> https://jsfiddle.net/401ykurg/

However, when I do exactly the same thing but whitout changing the opacity, the one that is removed from the flow is the pink one! --> https://jsfiddle.net/qnou6Lya/

What I am not understading?

Also, I can see that in the example that does work (where it removes the yellow one from the flow) where is actually position is behind the pink one, not the blue.

I can see this when making the yellow a bit wider --> https://jsfiddle.net/tszm65cu/

If absolutely positioned are positioned in relation to the first parent element it has that doesn't have position: static and when there's no such element, the element with position: absolute gets positioned relative to the document window, why doesn't it position the yellow div underneath the blue one?

The yellow does not have a top or anything, and since there's no parent element with absolute, relative, or fixed positioning applied, it should place it in relatin to the window.

Why is it there?

Thanks!

Upvotes: 8

Views: 2300

Answers (3)

AGE
AGE

Reputation: 3792

In your example, you have three div elements which are all positioned statically, which refers to the default behavior of positioning elements. In short, they will be positioned exactly as you laid them out in HTML.

An Absolutely positioned element however will be placed relative to its non-static ancestor element. So unless you have defined such ancestor, which you did not, the absolute positioned element will fall with respect to the body and it will not affect the static positioning of other elements..

So what does that have to do with your example? In your example you are dealing with opacity. Think of what occurs when you make an element transparent by a certain percentage, which essentially makes a visual element see through.

When you use position: absolute on one of your elements, it will move said element out of flow with the other elements in the page. In your case since all the elements dimensions are the same, the absolute positioned element's default behavior is to sit directly under (or above...) your non absolute positioned elements. Thinking back to your opacity since both elements have transparency and different background colors; due to the nature of color overlapping on top of another, you essentially created an overlapping color bleed effect.

So your absolute positioned element div does not dissapear, it just sits directly under one of the other non absolute positioned divs. Pretty fun and funky behavior but it is quite clear from that how your absolute positioned element is behaving.

Upvotes: 0

samurai_jane
samurai_jane

Reputation: 835

Opacity is not affecting the position.

When you make the yellow div absolutely positioned, regardless of its opacity, you are removing it from the flow. Because you are not stating something like top: 0 and left: 0 in addition to this, it stays where it is.

In the second fiddle, what appears to be yellow being removed from the flow is actually pink and yellow blending together since they each have 50% opacity. The yellow is on top and the pink is underneath. In the third fiddle, yellow is also on top but because its opacity is at 100% it looks like the pink one has been removed from the flow but it's actually underneath.

You may want to look more into z-index to control which one is on top.

Upvotes: 4

Henrique M.
Henrique M.

Reputation: 502

When you use position: absolute you create a stacking context. In order to see the yellow element you will have to use z-index to set the priority for the viewing.

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

Check this fiddle: https://jsfiddle.net/401ykurg/1/

  opacity: 0.99;
  z-index: 1;

Philip Walton has wrote a beautiful article on that: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Upvotes: 2

Related Questions