How to put a div on another div with a transparent background?

Question

I want to put div (1) with a transparent background at the top of another Div (2). Because I want the whole element that div (2) contains disable. therefore, if I placed div (1) on top of div (2), then the elements inside div (2) will no longer be a clicker.

Answer 1

You can add a transparent overlay on top of your content, for example:

http://jsfiddle.net/andresilich/WHEK3/1/

Answer 2

use the Z-index property.

 //inner div .div1 { z-index : 1; } //outer div .div2 { z-index : 10; } 

div2 above the layer div1.

Also check the existing question: How to overlay one div on another div

Answer 3

Use z-index for div div

http://www.w3schools.com/cssref/pr_pos_z-index.asp

use

Opacity: 0.5

for DIV 1. unfortunately, all IE could not support opacity

Answer 4

Pranaya is true. I personally use this method for overlays; eg:

 #overlay { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: #333333; //Cross-browser opacity below -moz-opacity:.80; filter:alpha(opacity=80); opacity:.80; z-index: 10000000; } 

Answer 5

I need it like you, but I use this code:

 <div class="content"><object type="application/x-shockwave-flash" height="100" width="222" data="http://www.usflashmap.com/component/cdt_new/cdt2_1.swf"> <param name="movie" value="http://www.usflashmap.com/component/cdt_new/cdt2_1.swf" /> <param name="base" value="http://www.usflashmap.com/component/cdt_new/" /> <param name="flashvars" value=" &timer=1& &time_template=2:ss;1:mm;0:hh& &time_color=0x000000& &label_color=0x000000& &background_color=0xFFFFFF& &flare_view=true& &time_label=d:DAY;h:HOUR;m:MIN;s:SEC& &time_zone=Local time& &event_time=year:2014;month:1;day:1;hour:0;minute:0;seconds:0& &event_duration=year:0;month:0;day:0;hour:0;minute:0;seconds:0& &event_recursion=yearly& &onpress_url=-& &event_onpress_url=-& &title=Nový rok je za:& &event_title=event& &sound_file=-& &event_sound_file=-& &transparent=true& " /> <param name="quality" value="high" /> <param name="wmode" value="transparent" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> </object><div class="overlay"></div></div>