Geek asks and answers

How does opacity affect the order of elements?

I found a really strange behavior for CSS opacitycombined with floating elements.
Consider the following HTML:

<div style="position: relative; clear: both">
   <div style="float:left>Left button</div> 
   <div style="float:right>Right button</div>  
</div>
<div style="opacity: 0.9">Overlay</div>

The latter divwill overlap the first two floating. Removing opacity will put the last div under the floats.

Here's what it looks like on my real page (a red background is just used to emphasize the effect): div with opacity Now, if I remove the opacity of the middle div: opacity disabled Ship, floating divs are available.

I tried the property z-index, but was not surprised when it did not help. I even managed to reproduce this in a JS script .

, ? ?
: chrome firefox. .
.

PS.: - , JSFiddle ? , , .

+3
2

.

  • (HTML),
  • ( ) z-index, "auto",
  • 1.
  • WebKit Chrome 22+, : , z-index ""

9.9.1 : 'z-index'

  • , .
  • ( ).
  • , -, - .
  • .
  • , , - , .
  • 0 0.
  • ( ). Blockquote

div, . , , (: ).

, , . , , rgba .

HTML/CSS, , .

, .

http://jsfiddle.net/K2nmL/7/

CSS

#allOptions.disabled {
  cursor: default !important;
  background-color: rgba(255,0,0,0.5);
  color: rgba(0,0,0,0.5);
}

#allOptions {
    background-color: red;
}

JavaScript

// Added a function to toggle the `disabled` class

Update

div. div, clearfix. , .

http://jsfiddle.net/K2nmL/8/

+2

float - left, #wrapper 0 . clearfix:

.clear:after {
    content: "";
    display: table;
    clear: both;
}

, <br> ? padding/margin. enter image description here

0

More articles:


All Articles