VPF::Непонятки со свойством z-index: - Форум программистов

php5

Дата 5.4.2008, 18:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

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

Что не так ?

SelenIT

Дата 5.4.2008, 23:57 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

php5

Дата 6.4.2008, 18:37 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 272
Регистрация: 15.8.2007

Репутация: нет
Всего: нет

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

SelenIT

Дата 6.4.2008, 18:55 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(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

)

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

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

bars80080

Дата 7.4.2008, 09:30 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

я честно говоря, надеюсь, что автор понимает что он делает, потому как тут можно запутаться уже в хаках, а вот по этим вещам:

Код

  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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 375
Регистрация: 14.8.2007
Где: Москва

Репутация: нет
Всего: 13

Жаль такая тема загнулась, пришлось тоже столкнуться.

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

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

--------------------

Я Критик Джим, раньше писал моды для IPB 1.3.x-2.3.x, а теперь продвигаю Node.js в массы.

SelenIT

Дата 23.5.2008, 09:50 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 375
Регистрация: 14.8.2007
Где: Москва

Репутация: нет
Всего: 13

SelenIT, огромное спасибо smile

Видимо темы были немного другого содержания и не очень релевантны smile

Цитата

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

Это было проще найти, уже поправил у себя smile

--------------------

Я Критик Джим, раньше писал моды для IPB 1.3.x-2.3.x, а теперь продвигаю Node.js в массы.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »