Problem. be blocked by flash
Set the parameters for Flash: <param name= "wmode" value= "opaque" >
<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=6,0,29,0 "width=" 468 "height=" ><param name= "movie" value=http:// www.163design.net/a/s/"http://pepsi.flash8.net/pepsi46860.swf" >
<param name= "wmode" value= "opaque" ><param "name=" quality "high" value= ><embed www.163design.net/a/s/"http://pepsi.flash8.net/pepsi46860.swf" quality= "High" pluginspage= "http:// Www.macromedia.com/go/getflashplayer "type=" Application/x-shockwave-flash "width=" 468 "height=" "></embed" ></object>
<div style= "Position:absolute;left:150;top:50;width:100px;height:50px;background:green" >
</div>
or use <param name= "wmode" value= "Transparent" >
<object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "http://download.macromedia.com/pub/ shockwave/cabs/flash/swflash.cab#version=6,0,29,0 "width=" 468 "height=" ><param name= "movie" value=http:// www.163design.net/a/s/"http://pepsi.flash8.net/pepsi46860.swf" >
<param name= "wmode" value= "Transparent" ><param "name=" quality "high" value= ><embed www.163design.net/a/s/"http://pepsi.flash8.net/pepsi46860.swf" quality= "High" pluginspage= "http:// Www.macromedia.com/go/getflashplayer "type=" Application/x-shockwave-flash "width=" 468 "height=" "></embed" ></object>
<div style= "Position:absolute;left:150;top:50;width:100px;height:50px;background:green" >
</div>
2. Be blocked by picture
This estimate is because the picture is also placed in the layer, and the picture is in the layer of the z-axis index is larger than the layer, so blocked, the solution is to change the level of the z-axis index value to larger than the picture layer.
<div style= "position:absolute;left:0;top:20;z-index:2;background:red;width:120px;height:70px" >
1
</div>
<div style= "position:absolute;left:50;top:50;z-index:2;background:green;width:120px;height:70px" >
2
</div>
<div style= "position:absolute;left:90;top:80;z-index:2;background:blue;width:120px;height:70px" >
3
</div>
3. Blocked by Form control
This is not the perfect solution, usually in the design of typesetting as far as possible to avoid this situation, if it is a last resort, when the layer through the form control to hide the form control, and then let it show:
<button onclick= "oselect.style.display= ' None"; olayer.style.display= ' inline ' "> Show layer Hide dropdown option </button>< Button onclick= "oselect.style.display= ' inline '; olayer.style.display= ' None '" > Show dropdown options hidden layer </button>
<div style= "position:absolute;left:0;top:50;z-index:2;background:red;width:120px;height:50px" >
Z-index:1<select id= "Oselect" ></select>
</div>
<div id= "Olayer" style= "position:absolute;left:30;top:60;z-index:2;background:green;width:120px;height:70px; Display:none ">
Z-index:2
</div>
