Имеется два div блока 1-й с id= cl_1 и z-index=100, 2-й с id= show_menu_client и z-index=88 Нужно что бы блок 1 перекрывал собой блок 2 но на практики получается наоборот Вот HTML <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/style_1.css"> </head> <body> <div id="show_menu_client"></div> <!--Блок который должен быть перекрыт--> <div id="fonHeader"></div> <div id="container"> <div id="pageHeader"></div> <div id="menu"> </div> <div id="wrapper"> <div id="block_1"> <!—————————Перекрывающий блок (самый верхний )————————————-> <div id='cl_1' class="info_clients"> <span id='clien_01' class="info_clients_footer" onmouseover="clie_select_on(this)" onmouseout="clie_select_off(this)" onclick="menu_show(this)" > <img src="img/logos_clients/fidele_logo.gif" width="95" height="81"> </span> </div> <!—————————————————————-> </div> <div id="block_2"> </div> </div> <div id="bottom-border" class="clear"></div> <div id="footer"></div> </div> </body> </html> <script> function clie_select_on(id) { id.style.backgroundImage="url(img/info_clients/footer_cv.jpg)"; } function clie_select_off(id) { id.style.backgroundImage="url(img/info_clients/footer_cb.jpg)"; } function menu_show(id) { var p=getPosition(id); document.getElementById('show_menu_client').style.top=p.y; document.getElementById('show_menu_client').style.left=p.x; } function getPosition(e){ var left = 0; var top = 0; while (e.offsetParent) { left += e.offsetLeft top += e.offsetTop e = e.offsetParent; } left += e.offsetLeft top += e.offsetTop return {x:left, y:top}; } </script> и CSS код * { padding: 0; margin: 0; } body { font-family: Tahoma,Verdana,sans-serif; text-align: center; background : #2f2f2f url(../img/fonFooter.jpg) repeat-x fixed right bottom; } #fonHeader { position : absolute; width: 100%; height: 252px; background-color: #FFFFFF; left: 0px; } #pageHeader { text-align : center; background : url(../img/cap.jpg) no-repeat center top; width: 876px; height: 254px; } #container { text-align:left; position : relative; margin : auto; background : url(../img/center.png) repeat-y center top; width : 876px; } #block_1 { float: left; width: 590px; margin : 0 0 0 20px; } * html #block_1 { display: inline; } #block_2 { float: left; width: 244px; margin : 0 0 0 10px; } /* Start Mac IE5 filter */ #block_1, #block_2 { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } #wrapper { overflow: hidden; /* This hides the excess padding in non-IE browsers */ } #wrapper { float: left; float/**/: none; } /* easy clearing */ #wrapper:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } #wrapper { display: inline-block; } /**/ #wrapper { display: block; } /* end easy clearing */ #footer { clear: both; } * > #footer, * > form, * > #notes, * > .output { position: relative; z-index: 1000; } #bottom-border div { margin-right: 10px; width: 30%; float: left; border-top-width:0; line-height:1px; position:relative; top:0px; } .clear { clear:both; } #footer { text-align : center; clear : both; font-size : 70%; background : url(../img/footer.jpg) no-repeat center top; height : 55px; voice-family : ""}""; height : 55px; voice-family : ""}""; } .info_clients { z-index: 100; margin-top:15px; background-image:url(../img/info_clients/cl_fon.jpg); background-repeat: no-repeat; width : 266px; height:183; } .info_clients_footer { z-index: 100; background-image:url(../img/info_clients/footer_cb.jpg); background-repeat: no-repeat; background-position: bottom left; width : 266px; height : 183px; display : block; overflow : hidden; text-align : center; } #show_menu_client { background-image:url(../img/info_clients/show_menu.png); background-repeat: no-repeat; position:absolute; width : 266px; height : 183px; z-index: 88; /*visibility:visible; hidden*/ } .info_clients_footer img{ margin-top:15px; } Что не так ?
