Jump to content
  • 0

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

prihod

Asked by prihod,

 Share

Question

prihod Explorer

prihod

Posted
Posted

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

Что не так ? :)

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept