Jumpy09 Posted May 12, 2011 Share Posted May 12, 2011 Using the following code: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pissing me off!</title> <style type="text/css"> body {background-color: #000000;} #Container {opacity: 0.75; background-color: #660000;} #secondContainer {opacity: 0.75; background-color: #333333; height: 100px;} #thirdContainer {background-color: #333333; height: 100px;} #relative {position: relative;} #absolute {position: absolute; top: 0; left: 0; background-color: #006600;} </style> </head> <body> <div id="Container"> <div id="relative"> <p>This should open the DIV, but the next will be behind the next div!</p> <div id="absolute"> <p>This</p> <p>is</p> <p>Pissing</p> <p>me</p> <p>off!</p> </div> </div> </div> <div id="secondContainer"> <p>It will be behind this!</p> </div> <div id="thirdContainer"> <p>It will appear above this!</p> </div> </body> </html> Simply put: I found a rather interesting glitch with positioning and opacity which happens in Firefox/Chrome and IE9. In the attachment, it will show you but I will explain. I'm using the id="<--id-->" to identify each div as I talk about them. Container holds two divs, relative and absolute. Absolute is inside Relative and will extend below Container and SHOULD render ABOVE secondContainer and thirdContainer. Container and secondContainer both have opacity of 0.75 which shouldn't really mean anything, but for some reason absolute will appear "behind" secondContainer but "above" thirdContainer. A simple fix is giving secondContainer position: relative; and z-index: -1; but I want to know why the heck this happens in the first place. If you give secondContainer an opacity of 0.99 it is more apparent of how it works. What I want to know is why opacity alters the z-index of an element? And in any case shouldn't giving something a lower opacity level give it less importance than something with a solid opacity? [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 12, 2011 Share Posted May 12, 2011 As far as I know opacity does not have a priority above a z-index (of any kind, it's just another property). z-indexes are to arrange the stacking order of positioned elements, within their context. In this case your #container does not contain #container2 and #container3. (so there context is different) In case you want to show the content of #container (which you positioned relative and absolute) above #container2 and #3 without setting a negative z-index to #2 and #3 you need to put it inside of #container to put them in the same context. all you need to do that is at a z-index higher than 0 to the absolute positioned element. So keep in mind the context. So the mark up looks like this than <div id="Container"> <div id="relative"> <p>This should open the DIV, but the next will be behind the next div!</p> <div id="absolute"> <p>This</p> <p>is</p> <p>Pissing</p> <p>me</p> <p>off!</p> </div> </div> <div id="secondContainer"> <p>It will be behind this!</p> </div> <div id="thirdContainer"> <p>It will appear above this!</p> </div> </div><!--- this is the end tag of #container putting in all in the same context --> Hope this makes things clear. (stacking order depends on the context (so the keyword is: context) Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 12, 2011 Share Posted May 12, 2011 To make it even more clear. The indentation of you mark up shows the context and stacking order pretty well . That is the context for the stacking order. See image [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
Jumpy09 Posted May 12, 2011 Author Share Posted May 12, 2011 After doing a bit of Googling I've come up with 2 solutions. 1. Give the following container "" position: relative; z-index: -1; "" which will allow the absolute div to float above the next div. 2. Just use background: rgba(0, 0, 0, 0.75); This will not only cause things to work right, the text itself won't be opaque as well. Using 1 will work and it degrades nicely in older browsers, whereas using 2 will just prevent the background from obtaining a color in older browsers. Your method would work if I wasn't using this method for select/option menus so that I can get rid of the ugly select boxes. Each portion of the form is in a Fieldset. I thank you for your response, but after hitting a few pages I found out that opacity does effect stacking order in order to render the effect of opacity. At least that is what I have read on an assortment of sites. Since it works in all browsers that way I guess my assessment of it being a glitch was inaccurate, as this is most likely how they meant it to behave. I'm using method #2, because I like that the text and child elements do not also inherit the opacity. Edit: In response to your second message: The example kind of speaks for itself though. Adding a z-index to the absolute or relative has no effect as the secondContainer still floats above the absolute div. The only way to actually keep the same method of opacity is to mess with the z-index of the secondContainer itself to push it behind. I'm not 100% sure why it works that way, I would assume if you want something to have an opaque level below 100% you would code it to actually sit on top of something else. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted May 12, 2011 Share Posted May 12, 2011 could you link one of that articles that claims opacity affects the stacking order? Anyone if you would keep in mind the stacking order as described above, you should be able to do what you want even with opacity. Quote Link to comment Share on other sites More sharing options...
Jumpy09 Posted May 12, 2011 Author Share Posted May 12, 2011 https://developer.mozilla.org/en/Understanding_CSS_z-index:The_stacking_context Positioning and assigning a z-index value to an HTML element creates a stacking context, (as does assigning non-full opacity). PHP Description of how it seems to work. <?php // This is how it acts, not an actual representation. $zindex = 0; for($div = 0; $div < 10; $div++) { echo "<div style=\"opacity: 0.75; z-index: $zindex;\"></div>"; $zindex++ } ?> Which is demonstrated with: <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pissing me off!</title> <style type="text/css"> body {background-color: #000000;} #Container {opacity: 0.75;background-color: #660000;} #secondContainer {opacity: 0.75; background-color: #333333; height: 100px;} #thirdContainer { opacity: 0.75; background-color: #333333; height: 100px;} .relative {position: relative;} .absolute {position: absolute; top: 0; left: 0; background-color: #006600;} .absolute1 {position: absolute; top: 0; left: 43px; background-color: #000066;} .absolute2 {position: absolute; top: 0; left: 85px; background-color: #660000;} </style> </head> <body> <div id="Container"> <div class="relative"> <p>This should open the DIV, but the next will be behind the next div!</p> <div class="absolute"> <p>This</p> <p>is</p> <p>Pissing</p> <p>me</p> <p>off!</p> </div> </div> </div> <div id="secondContainer"> <div class="relative"> <p>This should open the DIV, but the next will be behind the next div!</p> <div class="absolute1"> <p>This</p> <p>is</p> <p>Pissing</p> <p>me</p> <p>off!</p> </div> </div> </div> <div id="thirdContainer"> <div class="relative"> <p>This should open the DIV, but the next will be behind the next div!</p> <div class="absolute2"> <p>This</p> <p>is</p> <p>Pissing</p> <p>me</p> <p>off!</p> </div> </div> </div> </body> </html> Take out the Opacity and the proper stacking order presumes. The containers are lower in the document, with the absolute divs floating on top. If you stack them on top of each other taking out the left: ; or turning it to 0, it also acts like the php represents. I am sorry for the delayed post, I keep writing and when I re-read it I tend to think I am not making any sense so I re-write it. I hope you can understand what I am trying to get across. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.