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


Автор: Dewas 9.4.2008, 13:01
Кладу два дива один на другой, в одном диве таблица (вообще говоря, таблица это или нет - не важно, но с таблицами хорошо видно пустое место), в другом картинка, картинка идет после таблицы, так вот в браузере картинка оказывается под таблицей как и хотелось, но после таблицы остается пустое место высотой в картинку.
Отсюда вопрос, как наложить два дива так чтобы "лишнего" места нигде не занималось.

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<link href="style1.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<body>
    <table width="100%" border="1">
    <tr>
        <td>
            <div class="front">
            <table width="100%" border="1">
                <tr>
                    <td heiht="100px" width="50%">&nbsp;</td>
                    <td heiht="100px" width="50%">&nbsp;</td>
                </tr><tr>
                    <td height="500px">&nbsp;</td>
                    <td height="500px">&nbsp;</td>
                </tr>
            </table>
            </div>
            <div class="back">
                <img src="back.png">
            </div>
        </td>
    </tr>
    </table>
</body>
</html>


Код

div.front {
    z-index:10;
    position : relative;
    top: 0px;
    left : 0px;
}
div.back {
    text-align:right;
    z-index:0;
    position : relative;
    bottom: 350px;
    right : 100px;
}


Тоже самое прилагаю в аттаче.

Автор: NDenis 9.4.2008, 13:27
а если стили вот так прописать:
Код

div.back {
    text-align:right;
    /*z-index:0;*/
    position: absolute;
    bottom: 350px;
    right: 100px;
}

Автор: Dewas 9.4.2008, 14:02
Цитата(NDenis @ 9.4.2008,  13:27)
а если стили вот так прописать...

Так будет позиционирование относительно экрана, а нужно именно относительно ячейки большой таблицы. И при изменении размеров окна фон будет "плавать".

Автор: bars80080 9.4.2008, 14:20
засунь слой, который ты хочешь позиционировать относительно ячейки в эту саму ячейку
назначь ячейке position: relative, а слою position: absolute; 

Автор: Dewas 9.4.2008, 14:25
Работает! Спасибо!  smile 

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