position: absolute выглядит по-разному на разных экранах

zusicks438 · 21.09.2011, 18:11

Собственно, появилась у меня необходимость сделать вот так, как в приложенном PNG-файле. Подумал и решил разместить блок в нужном месте с помощью position: absolute; Ну и сделал. А потом подумал - ведь если разрешение экрана будет другое, то элемент просто уедет по горизонтали.

Как же мне решить эту проблему?

Yasuka · 21.09.2011, 19:24

Может, при помощи "position: relative;"?
Если размеры остальных блоков будут известны заранее.

Как-то так:

Код HTML:

<!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>
      ...
    </title>
    <style type="text/css">
/*<![CDATA[*/
     * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 12px/18px Arial, sans-serif;
        width: 100%;
    }
    #wrapper {
        width: 1000px;
        margin: 0 auto;
    }

    #container {
        height: 200px;
        background: #FFE680;
    }
    #element {
        height: 500px;
        width: 200px;
        position: relative;
        top: 100px;
        left: 750px;
        background: #999;
    }
    #content {
        width: 700px;
        height: 400px;
        background: #ccc;
    }
    /*]]>*/
    </style>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
  </head>
  <body>
    <div id="wrapper">
      <div id="container">
        <div id="element"></div><!-- #element-->
      </div><!-- #container-->
      <div id="content"></div><!-- #content-->
    </div><!-- #wrapper -->
  </body>
</html>

Можно и отрицательные отступы использовать.

zusicks438 · 21.09.2011, 19:46

Гм...а ведь при relative пространство, которое по идее должен занимать элемент, будет им занято? Или я не прав?

Тут еще подсказали, что вроде можно спозиционировать относительно родителя, если у него задать position: relative.

Yasuka · 21.09.2011, 20:58

Еще можно сделать родительский элемент с высотой в 1px и туда вставить блок, а дальше позиционировать его.
В таком случае его содержимое не будет влиять на содержимое верхнего блока.

Код, как в прошлом сообщений с добавлением одного элемента:

Код HTML:

<!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>
      ...
    </title>
    <style type="text/css">
/*<![CDATA[*/
     * {
        margin: 0;
        padding: 0;
    }
    body {
        font: 12px/18px Arial, sans-serif;
        width: 100%;
    }
    #wrapper {
        width: 1000px;
        margin: 0 auto;
    }
    #header {
        height: 200px;
        background: #FFE680;
    }
    #container {
        height: 1px;
    }
    #element {
        height: 500px;
        width: 200px;
        position: relative;
        top: -100px;
        left: 750px;
        background: #999;
    }
    #content {
        width: 700px;
        height: 400px;
        background: #ccc;
    }
    /*]]>*/
    </style>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />
  </head>
  <body>
    <div id="wrapper">
      <div id="header"></div><!-- #header-->
      <div id="container">
        <div id="element"></div><!-- #element-->
      </div><!-- #container-->
      <div id="content"></div><!-- #content-->
    </div><!-- #wrapper -->
  </body>
</html>

На один элемент больше.

zusicks438 · 25.09.2011, 10:25

Yasuka, а я короче подумал, можно же просто поставить position: relative; для родителя, просто как свойство, без top-right и.т.п. Тогда абсолютное позиционирование будет относительно него.

добавлено через 21 секунду
В принципе в тот же вечер сделал, просто отписать все забывал)

Разделы
Обсуждение доменных имён	Рыночные форумы	Дизайн и развитие проектов	Поисковая оптимизация	Отдыхаем
Обсуждение доменных имён и регистраторов	Подарю домен	Обсуждение веб-дизайна	Поисковые системы	Барахолка
⋅Аукционы	Продам домен - конкретная цена	Оценка дизайна, отзывы	⋅Yandex	Комната отдыха
⋅Обсуждение доменных имён и регистраторов IDN и РФ	⋅Домены в зоне .RU (Продам - конкретная цена)	Программирование	⋅Google	DomenForum - Замечания и предложения
⋅Обсуждение доменных имён и регистраторов newTLD	⋅Домены в зоне .РФ и IDN (Продам - конкретная цена)	Графический дизайн, Flash	Каталоги	Отзывы пользователей
Оценка доменных имён	Продам домен - Аукцион	Начинающему веб-мастеру	⋅Яндекс.Каталог
⋅Оценка IDN и РФ	⋅Домены в зоне .RU (Аукцион)		⋅DMOZ
⋅Оценка доменов в newTLD	⋅Домены в зоне .РФ и IDN (Аукцион)
Для новичков домен-индустрии	Продам домен - выслушаю предложения
Новости домен-индустрии	⋅Домены в зоне .RU (Выслушаю предложения)
⋅Другие полезные новости	⋅Домены в зоне .РФ и IDN (Выслушаю предложения)
Правовые вопросы	Куплю домен
Монетизация доменов	⋅Куплю домен за сумму до ~100$
	⋅Куплю .РФ или IDN домен
	Продам/Kуплю готовый сайт
	⋅Сателлиты и варез
	⋅Сайты на бесплатном хостинге
	⋅Покупка/Продажа контента
	Хостинг Предложения/Спрос
	Купля, продажа, обмен ссылками
	⋅Покупка
	⋅Продажа
	⋅Обмен
	⋅Размещение статей
	Финансы, кредиты, обмен валют, инвестиции
	Реклама
	⋅Вакансии
	⋅Каталоги
	⋅Регистрация в каталогах

Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)