Почему я не должен использовать position: absolute для позиционирования всего? - PullRequest
19 голосов
/ 16 февраля 2010

Этот вопрос задает один из моих учеников, и я хочу рассказать ему пример:

"Почему мы не должны создавать макет сайта с помощью кнопки Div Div в Dreamweaver, проще сделать макетс AP Div вместо Float + margin + padding, и если этот метод не верен, то почему он не очень хороший и почему Adobe предоставляет эту кнопку в Dreamweaver для создания макета, даже если это неправильный способ создания макета? "

Может ли кто-нибудь объяснить на простом и кратком примере, почему position:absolute не следует использовать для позиционирования всего ?

Я знаю положение: абсолютное не хорошо, но я не могухорошо объясните или приведите примеры.

Ответы [ 5 ]

25 голосов
/ 16 февраля 2010

Относительные деления


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


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

Абсолютные деления


Плюсы - Сначала они решают проблему небольшого количества контента, разбросанного по большей площади. Это обычно имеет место с данными заголовка или сильно графическими сайтами. Иногда у вас будет большая область с фоновым изображением, и у вас будет мало элементов управления по краям и в середине, которые должны быть точно размещены. В этом случае относительные div будут головной болью, так как вам потребуется несколько дополнительных div, и они легко сломаются, когда пользователь изменит размер своего браузера или получит доступ к сайту с экрана с небольшим разрешением. Другое основное использование для Absolute div - это выталкивание контента из области, в которой он был изначально. Отличным примером этого являются меню! Заголовок меню обычно содержится в одном элементе div, но элементы внутри него попадают в другой элемент div, когда заголовок меню находится над ним. Кроме того, всплывающие подсказки и всплывающие на экране подсказки обычно требуют абсолютного позиционирования.


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


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

9 голосов
/ 16 февраля 2010

Ну, во-первых, вы не знаете размер дисплея для каждого устройства, которое может получить доступ к вашему сайту. Большинство из них, вероятно, будут иметь полноразмерные дисплеи (800 x 600 или, вероятно, больше), но некоторые будут широкоформатными (например, 1440 x 900), а некоторые - мобильными устройствами.

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

7 голосов
/ 16 февраля 2010

ОК, допустим, вы абсолютно все позиционируете. Что происходит, когда #mainContent имеет один абзац на одной странице и два абзаца на второй странице. Где вы размещаете #footer по пикселям? Что произойдет, если пользователь увеличит размер шрифта?

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

4 голосов
/ 16 февраля 2010

Поскольку пользователь может изменить размер окна своего браузера.

1 голос
/ 17 февраля 2010

Боже мой! Сегодня была хорошая статья о хакерских новостях: http://www.barelyfitz.com/screencast/html-training/css/positioning/

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

Я знаю позицию: абсолют - это не хорошо, но я не могу хорошо объяснить или привести какие-либо примеры.

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

...