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

имейте в виду также, что абсолютное позиционирование используется не только для позиционирования вещей относительно окна браузера - оно также используется для точного позиционирования вещей внутри содержащего элемента. Когда я наконец понял это-после многих лет использования 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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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