Считается ли плохой практикой использование абсолютного позиционирования?

Question

Я разрабатывал веб-страницу, где я выкладывал доску для шахматоподобной игры вместе с парой лотков. Все это делается с использованием HTML (с jQuery для динамического обновления во время игры). Где-то я понял, что использование абсолютного позиционирования элементов на странице считается плохой практикой, и что предпочтительнее использовать относительное позиционирование.

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

Кто-нибудь знает причину, по которой относительное расположение предпочтительнее абсолютного? Существуют ли какие-либо руководящие принципы или практические правила, которые вы применяете при принятии решения, какой подход выбрать?

Answer 1

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

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

Сказав это, менее известное преимущество абсолютного позиционирования состоит в том, что оно позволяет локализованное абсолютное позиционирование в (относительно позиционированном) родительском элементе. Объяснить:

<div id="parentDIV" style="position:relative">
    <div id="childDIV" style="position:absolute:left:20px;top:20px;">
          I'm absolutely positioned within parentDIV.
    </div>
</div>

Здесь childDIV фактически располагается на 20 пикселей слева и на 20 пикселей сверху parentDIV, НЕ всего документа. Это дает хороший точный контроль над вложенными элементами на странице, не жертвуя общим макетом страницы.

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

Answer 2

Имейте в виду также, что абсолютное позиционирование используется не только для позиционирования объектов относительно окна браузера - оно также используется для точного позиционирования объектов внутри содержащего элемента. Когда я наконец понял это - после многих лет использования CSS - это действительно революционизировало мою способность эффективно использовать CSS.

Ключ в том, что абсолютно позиционированный элемент позиционируется в контексте первого элемента-предка, который имеет position:relative или position:absolute. Так что, если у вас есть это:

div.Container
{
   position:relative
   width:300px;
   height:300px;
   background:yellow;
}

div.PositionMe
{
   position:absolute;
   top:10px;
   right:10px;
   width:20px;
   height:20px;
   background:red
}

и

<div class=Container>
...
   <div class=PositionMe>
   ...
   </div>
...
</div>

... div PositionMe будет размещен относительно Container, а не на странице.

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

Answer 3

Это не отвечает на ваш вопрос, но ...

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

Теперь я знаю, что многие люди начинают кричать «не используйте таблицы» и «таблицы - это зло». Однако таблицы по-прежнему являются действительным инструментом для отображения некоторых типов данных, особенно данных, организованных по столбцам / строкам.

Answer 4

Я думаю, что проблема в том, что абсолютное позиционирование легко злоупотреблять. Для мирян гораздо проще понять систему координат, чем блочную модель. Кроме того, такие программы, как Dreamweaver, упрощают разметку страницы с помощью абсолютного позиционирования (и люди не понимают, что они делают).

Однако для типичного макета страницы статическое позиционирование по умолчанию должно быть адекватным и выполнять работу 90% времени. Она очень гибкая, и, поддерживая все в нормальном режиме, элементы знают о других элементах вокруг себя и будут действовать в соответствии с изменениями. Это действительно хорошо, когда имеешь дело с динамическим контентом (которым в наши дни является большинство страниц).

Использование абсолютного позиционирования намного более жесткое и затрудняет написание макетов, которые хорошо реагируют на изменение содержимого. Они просто слишком явные. Тем не менее, это идеально, если вам нужно свободно перемещать элементы по странице (перетаскивание), нужно накладывать элементы друг на друга или использовать другие методы компоновки, которые выиграют от работы с системой координат. Честно говоря, шахматная доска звучит как хорошая причина для ее использования.

Answer 5

Посмотрите на ваш сайт в разных браузерах при следующих условиях:

• Переключение настроек вашей ОС на режим с высоким разрешением / большими шрифтами / высокой контрастностью (все изменяют размер шрифта браузера по умолчанию)
• Увеличение / уменьшение размера шрифта по умолчанию в браузере
• Переопределить шрифты страницы в браузере (обычно где-то в настройках доступности)
• Переопределить / отключить таблицу стилей страницы (предоставлено, пользователи не должны ожидать, что шахматы будут работать должным образом в этом сценарии: -))

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

Answer 6

Нет жестких и быстрых правил. Различные формы позиционирования хороши в разных вещах.

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

Answer 7

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

Answer 8

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

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

Answer 9

Мне кажется, что я здесь единственный, кто совершенно не согласен с предположением, что абсолютное позиционирование - это не плохая практика. За исключением таких условий, как анимация или элементы, которые должны находиться конкретно в «необычном» месте, в котором находятся их родители, абсолютное позиционирование нарушает структуру вашего HTML (именно это, по моему мнению, и предполагает HTML), поскольку вы можете достичь результатов, которые отличаются визуальностью из структуры очень легко. Более того, реализация дизайна намного сложнее и проблематичнее с абсолютом, потому что вам нужно измерить каждый элемент, и у вас есть много места для ошибки (в сравнении с нормальным потоком, который намного проще и правильнее для построения структуры каркаса сайта)

И, наконец, что касается шахматной доски, я считаю, что самым сложным способом ее создания является использование абсолютной позиции! Создание доски со столом было бы намного проще и правильнее (в конце концов, это таблица) ... И лично я сделал бы это с классом cube, который имел бы float: left (с clear на каждый девятый куб)

Абсолютное позиционирование 64 различных квадратов безумно!

Answer 10

Некоторые вещи невозможно обойтись без позиции: абсолют. Другие вещи гораздо проще достичь с помощью абсолютного позиционирования (скажем, вам нужна нижняя правая кнопка для «read more» в окне с фиксированной / минимальной высотой, и у вас недостаточно текста в этом поле). Итак, мой совет: просто используйте тот, который соответствует вашим потребностям ...