10

I want to put a div(1) with transparent background on the top of another Div(2). Because I want to make all the element that div(2) contains disable. so, If i will put div(1) on top of div(2) then elements that are inside the div(2) will not be clicker anymore.

Mahesh Thumar
  • 4,257
  • 5
  • 22
  • 30

5 Answers5

2

make use of Z-index property thats it. 

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

//outer div

    .div2
    {
     z-index : 10;
    }

div2 over lay div1.

Also check existing question answer : How to overlay one div over another div

Community
  • 1
  • 1
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263
2

Use z-index for both div DIV

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

use

opacity:0.5

for the DIV 1. unfortunately all IE couldn't support opacity

Mo.
  • 26,306
  • 36
  • 159
  • 225
  • 1
    See my answer for IE opacity; it certainly works in IE 8 and 9 but I think it works in IE 6 and 7 too. – ClarkeyBoy Sep 10 '11 at 21:50
  • @ClarkeyBoy IE 6, 7 and 8 coud not support opacity :( – Mo. Sep 11 '11 at 00:41
  • meh.. good old Microsoft eh? Always throwing a spanner in the works... :D – ClarkeyBoy Sep 11 '11 at 00:45
  • @ClarkeyBoy That is true Even IE10 does not support some of the css3 features :( – Mo. Sep 11 '11 at 01:44
  • There's an IE10? Dang it.. another browser for us to support. Why can't MS just admit their browser is crap and move on? :D – ClarkeyBoy Sep 11 '11 at 01:46
  • @ClarkeyBoy take a look this site [link]http://www.findmebyip.com/litmus you can see the comparison list on this site as a developer I'm not happy with IE – Mo. Sep 11 '11 at 01:57
1

Pranay is correct. I personally use this technique for overlays; for example:

#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;
}
ClarkeyBoy
  • 4,934
  • 12
  • 49
  • 64
0

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>
Taryn
  • 242,637
  • 56
  • 362
  • 405
devondre
  • 493
  • 6
  • 14
0

You can add a transparent overlay over your content, like so:

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

Andres I Perez
  • 75,075
  • 21
  • 157
  • 138