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

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

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

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

Ответ 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 parentDIV слева и на 20 parentDIV вверху parentDIV, а НЕ в целом документе. Это дает хороший точный контроль над вложенными элементами на странице, не жертвуя общим макетом страницы.

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

Ответ 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, а не на страницу.

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

Ответ 3

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

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

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

Ответ 4

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

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

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

Ответ 5

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

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

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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

ИМО, совсем не плохо. Недавно я завершил задание с соблюдением стандартов AA и поддержкой FF2, IE7, IE6 (да, боль, которую я знаю). Были определенные макеты, которые были только достижимы из-за абсолютно позиционирования! Даже определенные компоненты, такие как кнопки, в которых требуется расслоение (прозрачные пленки), были возможны только из-за абсолютного позиционирования. Если у кого-то есть лучший способ, пожалуйста, напишите мне.

Абсолютное позиционирование ломает поток, если мы знаем, как ограничить поток (изменить родительские координаты на относительный/абсолютный), это весело. Я не знаю о старых браузерах (сам IE6 - динозавр), но одна болезненная вещь, которую я обнаружил, заключалась в написании в формате PDF (Cute PDF) или открытии с помощью WINWORD (sue me), который дает потертый результат.

Ответ 12

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

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

Шахматная доска - это таблица, ячейки таблицы не нуждаются в настройке положения. Для событий onblur/onfocus и cie сделают эту работу. Зачем вам нужен подсчет пикселей?

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