Помогите с позиционированием CSS div - PullRequest
1 голос
/ 30 июня 2010

немного CSS вопрос софтбола здесь (надеюсь).

Я ищу некоторую помощь по CSS в отношении прикрепленного скриншота. У меня большая коробка правильно отцентрирована, но маленькие коробки создают мне некоторые проблемы.

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

Нижняя маленькая коробка в основном должна придерживаться дна. Я планирую сделать так, чтобы он скрывался и показывался с помощью jQuery, поэтому он не должен нарушать поток текста внутри (я просто хочу, чтобы он отображался поверх всего остального).

Действительно, у меня нет никаких ограничений, кроме тех, что я упомянул выше, поэтому любое предложение будет очень полезно:)

альтернативный текст http://img812.imageshack.us/img812/3598/screenbg.png

Правка - это то место, где я сейчас нахожусь.

#container {
  width: 800px;
  margin: 0 auto;
  text-align: center;
}

Ответы [ 3 ]

4 голосов
/ 30 июня 2010

Я думаю, вы на правильном пути.Если вас не волнует наложение или перекрытие блоков, просто используйте position: absolute для маленьких блоков и position: relative для больших блоков.Последний может быть ключом, который вы упускаете, поскольку он привязывает маленькие прямоугольники к большому.

ОБНОВЛЕНИЕ

Я не предлагаю использовать отрицательные поля, как некоторые другие пользователи.Весь смысл position: absolute в том, чтобы точно разместить элемент, используя свойства right, top, bottom, left.Если вы перемещаете абсолютно позиционированный элемент исключительно с отрицательными полями, он все равно будет зависеть от его места в порядке документа.

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

0 голосов
/ 01 июля 2010

Используйте z-index, чтобы нижний элемент div перекрывал все остальное и удалял / скрывал его при необходимости.Это, безусловно, лучше для CSS: "position: absolute; margin-top: -40px; margin-left: 20px; вы также можете сделать это как margin: -40px 20px 10px -3px; при необходимости. В общем, япобудит вас избегать абсолютного позиционирования или дизайна своей страницы таким образом, чтобы не потребовать такого подхода.

0 голосов
/ 30 июня 2010

ваша (большая) коробка имеет фиксированную высоту / ширину или нет?

как угодно, попробуйте установить ваши маленькие коробки в абсолютных значениях, но не используйте "left: 20px; top: 30px;"но "margin-right: -50px; margin-top: -80px;", возможно, это решение ...

удачи!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...