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

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

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

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

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

Объяснить:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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