Почему я не должен использовать позицию: абсолютный для позиционирования всего?

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

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

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

Должны ли мы когда-либо использовать его для размещения элементов макета (#wrapper, #header, #footer, #mainContent, #sidebar и т.д.)?
Какую проблему мы можем получить, если мы создадим макет с позицией: абсолютное использование кнопки div для Dreamweaver AP изображение кнопки панели инструментов http://livedocs.adobe.com/en_US/Dreamweaver/9.0/images/draw_layer_button.gif?

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

Ответ 1

Относительные Divs

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

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

Абсолютные Divs

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

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

В заключении. Много раз вы захотите использовать сайт с разделами Absolute и Relative div не только потому, что они оба служат цели, а потому, что при совместном использовании вы можете создавать наиболее перспективные веб-страницы с наименьшим количеством времени и кода.

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

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

Ответ 5

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

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

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

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