Непонятки со свойством z-index:

prihod · April 5, 2008

Имеется два 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;
}

Что не так ?

homm · April 5, 2008

.info_clients
{
position: relative;
z-index: 100;
margin-top:15px;
background-image:url(../img/info_clients/cl_fon.jpg);
background-repeat: no-repeat;
width : 266px;
height:183;
}

prihod · April 5, 2008

в IE и Mozilla Firefox не работает , прокатило только для Opera

prihod · April 17, 2008

Ну так что никто не знает как это можно решить ???

ZoNT · April 17, 2008

Может я что не понял - но как он будет перекрывать его, если они в разных местах расположены???

ZoNT · April 17, 2008

Да и вообще у тебя #container расположен по z-index ниже #show_menu_client (0

Sign In

Непонятки со свойством z-index:

Question

prihod

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

prihod

Link to comment

Share on other sites

prihod

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

ZoNT

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information