Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Непонятки со свойством z-index:


Автор: php5 5.4.2008, 18:31
Имеется два 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; 
    }
/* End Mac IE5 filter */
#wrapper
    {
    overflow: hidden; /* This hides the excess padding in non-IE browsers */
    }
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
    {
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
    float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
    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;
    }
/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #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;
}

Что не так ? smile 

Автор: SelenIT 5.4.2008, 23:57
z-index применяется только к позиционированным элментам (absolute, relative или fixed). В данном случае, видимо, relative спасет.

Автор: php5 6.4.2008, 18:37
 relative в IE и Mozilla Firefox  не работает , прокатило только для Opera

Автор: SelenIT 6.4.2008, 18:55
Цитата(php5 @  6.4.2008,  18:37 Найти цитируемый пост)
elative в IE и Mozilla Firefox  не работает 

Должен работать. Ссылку на реальный пример можно (а то из приведенного кода в отсутствие фоновых картинок ничего не понятно)?

И еще, почему для той же .info_clients при width указана размерность (px), а при height не указана? Должна быть везде. В том числе в ф-ции menu_show(something).

P.S.
Цитата(php5 @  5.4.2008,  18:31 Найти цитируемый пост)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Неужели это XHTML 5? ;)

Автор: bars80080 7.4.2008, 09:30
я честно говоря, надеюсь, что автор понимает что он делает, потому как тут можно запутаться уже в хаках, а вот по этим вещам:
 
Код
  padding-bottom: 32767px !important;
    margin-bottom: -32767px !important; 
* > #footer, * > form, * > #notes, * > .output
    {
    position: relative;
    z-index: 1000;
voice-family : "\"}\""; 
 я не могу сказать что не так

отсюда наверняка и неработоспособность relative, который везде почему-то успешно работает

вообще по z-index проблемы быть по определению не должно
перекрывающий блок находится ниже по коду, стало быть он по умолчанию должен лезть наверх
однако, всё это жонглирование и порождает ошибку

Автор: Sannis 23.5.2008, 00:02
Жаль такая тема загнулась, пришлось тоже столкнуться.

У меня на странице отображается div с прописанным в стилях position:relative, плюс он находится в самом конце тела документа. При его отображении ему присваивается z-index 100, что должно перекрывать все присутствующие на странице элементы. Тем не менее flash всё равно просвечивают через этот слой. Ради эксперимента пробовал даже самому баннеру присвоить position:relative и z-index:1, но всё равно он просвечивает.

Возможно у автора темы получилось победить этот баг, или ещё у кого-то есть работающий пример, в котором можно посмотреть параметры?

Автор: SelenIT 23.5.2008, 09:50
Цитата(Sannis @  23.5.2008,  00:02 Найти цитируемый пост)
flash всё равно просвечивают через этот слой

У флеша бесконечный z-index, если он отображается в windowed mode. Чтобы его укротить, нужно прописать <param name="wmode" value="opaque"> в object и, соответственно, атрибут wmode="opaque" в embed (если он используется). Обсуждалось на форуме сотни раз;)

Другая больная тема с z-index'ами - select в IE < 7, два основных воркэраунда - перекрытие iframe'ом и скрытие селектов на время показа абсолютного слоя скриптом...

Автор: Sannis 23.5.2008, 22:10
SelenIT, огромное спасибо smile Видимо темы были немного другого содержания и не очень релевантны smile

Цитата

Другая больная тема с z-index'ами - select в IE < 7, два основных воркэраунда - перекрытие iframe'ом и скрытие селектов на время показа абсолютного слоя скриптом...
Это было проще найти, уже поправил у себя smile

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)