position:absolute в ie

Тиар · July 10, 2009

доброго времени суток, уважаемые специалисты

у меня назрела проблемка которую не могу решить(

есть отрывок кода html:


<div class="one">ТЕКСТ</div>
<div class="two"><img src="рисунок"></div>

и отрывок кода css к нему:


.one{
    float:left;
}
.two{
    position:absolute;
}

теперь собственно проблема. нужно чтобы текст был НАД рисунком, а не слева. Опера и Мозила позиционируют нормально, IE выкабенивается и ставит текст слева. несмотря на position:absolute

подскажите пожалуйста какое-либо решение, но с условием что float:left останется, потому что на нем держится остальное содержимое блока

Edited July 10, 2009 by Тиар

psywalker · July 10, 2009

Попробуй так, а вообще поидее лучше бы задать фон для блока с флоат

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}

.one{
float:left;
position: relative;
z-index: 1;
}
.two{
position:absolute;
}
</style>
</head>

<body>
<div class="one">ТЕКСТ</div>
<div class="two"><img src="../min-height-border/logo.jpg"></div>
</body>
</html>

Тиар · July 10, 2009

так не получается(( как ты показал - картинка встает над текстом, а если ставить posirion:relative вместо absolute, то ломается вся структура

psywalker · July 10, 2009

вот таким образом у меня во всех браузерах включая ИЕ6 картинка находиться под текстом

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
*{ margin: 0; padding: 0;}

.one{
float:left;
position: relative;
z-index: 1;
background: #993;
}
.two{
position:absolute;
left: 0;
top: 0;
}
</style>
</head>

<body>
<div class="one">ТЕКСТ</div>
<div class="two"><img src="../min-height-border/logo.jpg"></div>
</body>
</html>

Sign In

position:absolute в ie

Question

Тиар

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Тиар

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information