проблема с position:absolute в IE

dropoff · October 7, 2010

Привет всем.

Столкнулся с проблемой в IE

Не могу понять как поправить

Есть такой код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>HeLlO</title>
	<meta http-equiv="content-type" content="text/html; charset=cp-1251" />
</head>
<body>

<style>
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {padding:0; margin:0;}
html {height: 100%;}
body {font: 12px/18px Tahoma, Helvetica, "Helvetica Neue", Verdana, sans-serif;height:100%;background:#fff;}

.block {width:700px;margin:0 auto;text-align:center;}

.block .img {margin:4px;padding:4px;border:1px solid #000000;width:150px;background:red;}

.block .image {position:relative;height:150px;line-height:125px;vertical-align:middle;display:-moz-inline-box;display:inline-block;}
.block .image img {vertical-align:middle;}

.image .desc {position:absolute;top:60%;right:50px;text-align:left;width:150px;padding:10px;background:blue;z-index: 1;}
</style>

<div class="block">

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>


</div>

</body>
</html>

Получается так, что всплывающее окошко с описание перекрывается последующими картинками.

появление описания происходит через небольшой скрипт, который просто добавляет display:block;, эт не важно.

Облазил кучу сайтов, но так и не нашел решения. Пробовал использовать zoom, но тоже не помогает.

Как можно поправить?

Заранее всем огромное спасибо!

Edited October 7, 2010 by dropoff

Great Rash · October 7, 2010

.image .desc {position:absolute;top:60%;right:50px;text-align:left;width:150px;padding:10px;background:blue;z-index: 1;}

dropoff · October 7, 2010

В ie блоки перекрывают окошки. z-index не помогает.

вот скрин http://i060.radikal.ru/1010/c1/984b58b3259f.png

сайт блок будет резиновый. это я тут фикс щирину сделал.

на деле картинки с сужением страницы будут двигаться по блоку. и описание нужно всегда поверх всех картинок. а получается, что в IE описание всегда ПОД рядом картинок окторые идут ниже.

Lincky · October 7, 2010

В ie блоки перекрывают окошки. z-index не помогает.
вот скрин http://i060.radikal.ru/1010/c1/984b58b3259f.png
сайт блок будет резиновый. это я тут фикс щирину сделал.
на деле картинки с сужением страницы будут двигаться по блоку. и описание нужно всегда поверх всех картинок. а получается, что в IE описание всегда ПОД рядом картинок окторые идут ниже.

Описание будет появляться одновременно в одном блоке .image?

Если да, то для текущего блока .image ставим z-index, к примеру, 10

dropoff · October 7, 2010

Нет. Описания будут появляться только при наведении на определенную картинку. Т.е. у каждой картинки свое описание. И при наведении на определенную картинку выскакивает её описание.

На скрине я просто убрал display:none;, чтобы была понятна суть проблемы. Проблема, естественно, только в осле. причем и в 8 и 7. в 6 даже не открывал)

z-index не помогает. Если я у image ставлю z-index:1; а у desc ставлю z-index:1000; - дела не меняет. нижние блоки image все- равно налазят на desc

обновил сообщение первое, там страница с примером.

Edited October 7, 2010 by dropoff

Great Rash · October 7, 2010

Дело в том, что в осле у блоков, идущих в коде ниже, z-index по умолчанию всегда выше чем z-index предыдущего блока.

Лечится это добавлением z-index задом-наперед - т.е. первому блоку (.image) задаем z-index: 10;, второму - z-index: 9; и т.п. по убыванию.

Т.к. z-index потомка отсчитывается относительно z-index'а родительского блока, то возможным решением проблемы будет вынос блока .desc за пределы блока .img.

dropoff · October 7, 2010

Да, да. Такое я и вычитывал, но не нашел как реализовать. И решений не было.

Т.к. z-index отсчитывается относительно z-index'а родительского блока, то возможным решением проблемы будет вынос блока .desc за пределы блока .img.

А как цеплять тогда к нужной картинки её описание?

Great Rash · October 7, 2010

Яваскриптом находить координаты картинки на странице и цеплять блок по ним.

Сейчас подумал: можно отказаться от display: inline-block;, а присвоить всем .image float: right;. Только располагать эти блоки надо будет, опять же, задом-наперед.

Lincky · October 7, 2010

1-й
<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>
2-й
<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

оставляем такой же код.

при наведении на 1-й появляется описание для него. Это реализуется есессно скриптом. и в этом же скрипте делаем z-index для 1-го блока. Остальным не надо ничего прописывать, кроме существующего в стилях position:realtive.

И тогда будет все ок.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>HeLlO</title>
	<meta http-equiv="content-type" content="text/html; charset=cp-1251" />
</head>
<body>

<style>
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {padding:0; margin:0;}
html {height: 100%;}
body {font: 12px/18px Tahoma, Helvetica, "Helvetica Neue", Verdana, sans-serif;height:100%;background:#fff;}

.block {width:700px;margin:0 auto;text-align:center;}

.block .img {margin:4px;padding:4px;border:1px solid #000000;width:150px;background:red;}

.block .image {position:relative;height:150px;line-height:125px;vertical-align:middle;display:-moz-inline-box;display:inline-block;}
.block .image img {vertical-align:middle;}

.image .desc {display:none; position:absolute;top:60%;right:50px;text-align:left;width:150px;padding:10px;background:blue;z-index: 1;}
</style>

<div class="block">

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image" style="z-index:100;">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc" style="display:block">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>

<ins class="image">
	<div class="img"><a href="#">картинка</a></div>
	<div class="desc">
		описание
	</div>
</ins>


</div>

</body>
</html>

Edited October 7, 2010 by Lincky

dropoff · October 7, 2010

Яваскриптом находить координаты картинки на странице и цеплять блок по ним.

К сожалению такое не приемлемо наверно. Ибо очень много картинок и в разных выводах(блоки и контент). и скрипт тогда будет не хило грузить страницу. имхо.

оставляем такой же код.
при наведении на 1-й появляется описание для него. Это реализуется есессно скриптом. и в этом же скрипте делаем z-index для 1-го блока. Остальным не надо ничего прописывать, кроме существующего в стилях position:realtive.
И тогда будет все ок.

Так и сделаю. Спасибо.

Спасибо всем за помощь.

Sign In

проблема с position:absolute в IE

Question

dropoff

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

dropoff

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

dropoff

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

dropoff

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

dropoff

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information