Using opacity to change the stacking order



can anyone explain why does opacity have any affect on stacking of html element ?


Relevant part of the CSS Code:

div:first-child{ opacity: 0.99; } .red{ background: red; z-index: 1; } .green{ background: green; margin: 20px 0 0 20px; } .blue{ background: blue; margin: 40px 0 0 40px; }

Plain HTML:

<div> <span class="red"></span> </div> <div> <span class="green"></span> </div> <div> <span class="blue"></span> </div>

I am learning about z-index, it seemed pretty simple until i encountered this exception where it seems to have no affect on the stacking order after addition of opacity, can anyone explain the significance of opacity in this particular context?



<h2>See Snippet 2</h2> <blockquote> <ul><li>In order for z-index to be of any use, the element has to to have one of the following: <ul><li>position:absolute</li> <li>position:relative</li> <li>position:fixed</li> </ul></li> </ul></blockquote> <hr /><blockquote> <ul><li>opacity works on a scale of 0 to 1, so having a .99 is useless.</li> </ul></blockquote> <hr /><blockquote> <ul><li><span>s inline elements and don't start with any discernable width or height, so in order to actually see any background, you need to give them some dimensions (i.e. height and width) or content (i.e. text inside of them). It also helps if you assign display:inline-block because dealing with display:inline isn't intuitive.</li> </ul></blockquote>

In Snippet 1 I've added the what was previously mentioned in your code.

In Snippet 2 I have made an interactive demo showing z-index and opacity stacking relationship.

<strong>SNIPPET 1</strong>

<pre class="snippet-code-css lang-css prettyprint-override">div:first-child { opacity: 0.2; } .red { position: relative; background: red; z-index: 1; } .green { position: relative; background: green; margin: 20px 0 0 20px; } .blue { position: relative; background: blue; margin: 40px 0 0 40px; } span { display: inline-block; width: 100px; height: 20px; } <pre class="snippet-code-html lang-html prettyprint-override"><div> <span class="red"></span> </div> <div> <span class="green"></span> </div> <div> <span class="blue"></span> </div>

<strong>SNIPPET 2</strong>

<pre class="snippet-code-js lang-js prettyprint-override">document.getElementById('rng1').oninput = function() { var rad = document.querySelectorAll('.rad:checked')[0]; var out = rad.nextElementSibling.id; document.getElementById(rad.value).style.opacity = this.value; document.getElementById(out).value = this.value; } <pre class="snippet-code-css lang-css prettyprint-override">#parent { position: relative; width: 480px; height: 200px; border: 3px dashed grey; background: rgba(0, 0, 0, .2); text-align: right; } fieldset { width: 450px; } div { position: absolute; width: 300px; height: 150px; } #A { background: tomato; z-index: 10; text-align: left; } #B { background: cyan; z-index: 0; text-align: center; } #C { background: yellow; z-index: -10; text-align: right; } output { width: 30px; display: inline-block; } <pre class="snippet-code-html lang-html prettyprint-override"><section id='parent'> <div id='A'>A</div> <div id='B'>B</div> <div id='C'>C</div> Parent </section> <form id='ui'> <fieldset> <label> <input id='radA' class='rad' name='rad' type='radio' value='A' checked>A: <output id='oA'></output> </label> <label> <input id='radB' class='rad' name='rad' type='radio' value='B'>B: <output id='oB'></output> </label> <label> <input id='radC' class='rad' name='rad' type='radio' value='C'>C: <output id='oC'></output> </label> <label> <input id='radD' class='rad' name='rad' type='radio' value='parent'>Parent: <output id='oD'></output> </label> <br> <label>Opacity <input id='rng1' type='range' min='0' max='1' step='.1' value='1'> </label> </fieldset> </form>


  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • How to Divide an array on c#?
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • Making header act like google chrome mobile app address bar
  • Reading space separated values file in c++ error
  • WPF version of .ScaleControl?
  • Hibernate to update table schema
  • blade.php method outputting it's result to the form
  • D3 get axis values on zoom event
  • Parse a date string in a specific locale (not timezone!)
  • Blackberry - Custom EditField Cursor
  • $wpdb not working in file of WordPress plugin
  • Breeze - Deleted Items nav properties bug
  • Handling un-mapped Rest path
  • Body moving without any force applied? (Box2d)
  • Paperclip, set path outside of rails root folder
  • How to get address from latitude and longitude android google map v2 [duplicate]
  • RectangularRangeIndicator format like triangular using dojo
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • javaw.exe and eclipse startup problems
  • How to recover from a Spring Social ExpiredAuthorizationException
  • script to move all files from one location to another location
  • javascript inside java/jsp code
  • Fill an image in a square container while keeping aspect ratio
  • ILMerge & Keep Assembly Name
  • Running a C# exe file
  • Large data - storage and query
  • Akka Routing: Reply's send to router ends up as dead letters
  • WOWZA + RTMP + HTML5 Playback?
  • Numpy divide by zero. Why?
  • Compare two NSDates in iPhone
  • Android Studio and gradle
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Memory offsets in inline assembly
  • need help with bizarre java.net.HttpURLConnection behavior
  • Android Google Maps API OnLocationChanged only called once
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • How can i traverse a binary tree from right to left in java?