Как бы вы объяснили позиционирование CSS человеку?

земляники.

Я, относительно здравомыслящий человек и тело, настоящим откажусь от понимания CSS-позиционирования самостоятельно.

В онлайн-ресурсах о CSS в большой степени объясняется, что атрибут "color" позволяет вам установить "цвет" материала. Unmöglish.

Затем, если вы хотите поставить что-то слева от чего-то другого (сумасшедшая идея, правда?), вам нужно только установить его влево, если вы установите флажок "relative" на его родительский блок, который должен иметь grand-father node с флагом "абсолютный", установленным в true, чтобы он позиционировался относительно другого контейнера, который может содержать или не содержать ничего, иметь позицию, размер или нет, в зависимости от браузера, размера другого материала и, возможно, фаз луны. (Экспертам по CSS рекомендуется не относиться к предыдущему абзацу серьезно. Я уверен, что кто-то укажет, что мой rant недействителен или совместим с w3c - и что он применим только к шведской бета-версии IE6)

Шутя отдельно, я ищу любой ресурс, который объясняет коренные причины всей сумасшедшей манеры в CSS. По сути, что-то, что было бы для CSS, что статьи Crockford для Javascript.

В этом духе, позвольте мне отметить, что я не ищу библиотеки css или grid frameworks, такие как план, или для языков расширения CSS, таких как lesscss. Я использую те, которые облегчают мои страдания, но я боюсь, что это будет похоже на то, что кто-то скажет "просто использовать jQuery", когда они скажут, что они не могут обернуть свой мозг прототипом наследования в JS.

Если все, что вы можете указать мне, http://shop.oreilly.com/product/9781565926226.do, я думаю, что считаю себя обреченным.

Спасибо заранее.

EDIT: я, вероятно, не должен был говорить о "позиционировании" (спасибо всем, кто снова объяснил, что "позиция: относительная" не означает "относительно вашего контейнера" и что "позиция: абсолютная" означает относительно чего-то. Я никогда не был так близок к тому, чтобы сделать monty python script из вопросов SO). Я думаю, что имел в виду макет в целом (позиционирование + поплавки + базовые линии + вся глупость, необходимая для размещения вещей по прямой линии).

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

Ответ 1

Кажется, что большинство других не совсем поняли суть вашего поста. Я сломаю это для вас:

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

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

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

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

Что еще, функции были расширены, чтобы делать то, что изначально не предназначалось. Это сделало существующие реализации очень неудобными.

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

По моему мнению, нет лучшей книги для "простого человека", чтобы раскрыть CSS, чем это:

http://www.amazon.com/Eric-Meyer-CSS-Mastering-Language/dp/073571245X

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

Ответ 2

Позиционирование легко понять:

relative positioning - отображать страницу точно так, как обычно. После выполнения чего-либо с позиционированием relative перемещается относительно того места, где оно было первоначально. Ничего другого не влияет.

absolute positioning - Удаляет элемент из потока страницы. Другие вещи отображаются так, как будто этого не было, т.е. Они заполняют пространство, которое занял этот элемент. Теперь они позиционируются абсолютно к ближайшему элементу с набором position: relative OR position: absolute. Во многих случаях это означает, что они расположены абсолютно по тегу body.

Затем вы помещаете вещи в top, right, bottom и left в CSS.

Если что-то имеет позиционирование absolute:

расположенную относительно верхнего левого угла страницы при использовании top и left. Позиционируется относительно нижнего правого края страницы при использовании bottom и right.
его ширину/высоту можно контролировать с помощью комбинации top / bottom или left / right, например: top: 100px; bottom: 100px сделает элемент, который 100% - 200px его родительской высоты (если вы не указали высоту тоже в этом случае top и height используются, а bottom игнорируется).

Ответ 3

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

http://coding.smashingmagazine.com/2009/10/19/the-mystery-of-css-float-property/

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Эти две статьи должны вас поймать.

Прочитайте немного о свойствах отображения, так как они, вероятно, будут одной из проблемных областей в любом заданном html/css.

Ответ 4

эта ссылка в основном касается z-индекса, но IMO это довольно хорошая работа, объясняя, как вещи размещаются на странице

http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

Эта ссылка больше ориентирована на позиционирование, но важно понять ось z, чтобы понять остальную головоломку позиционирования

http://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/

Ответ 5

Вы проверили эту замечательную книгу? http://shop.oreilly.com/product/9781565926226.do

просто шучу.

Я не думаю, что вам нужен целый ресурс, посвященный этому одному вопросу. Это довольно просто после нажатия.

Подумайте о позиционировании CSS как способе позиционирования элементов либо относительно их (независимо от того, где они попадают на страницу), либо абсолютно из координаты X/Y.

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

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

1 - расположите себя в верхнем левом углу страницы и либо вверх/вниз вправо/влево, как я упоминал ранее, в зависимости от того, являются ли цифры +/-.

2-, если элемент PARENT либо расположен как absolute, либо relative, он будет располагаться в верхнем левом "углу" родительского элемента, а не в окне браузера.

Подумайте о z-index как о слоях в фотошопе. С 0 - нижним (и более новые браузеры распознают отрицательный индекс z для еще большего удовольствия). и 100 как верхний (более новые браузеры распознают бесконечное количество чисел). z-index работает только с позицией: relative и absolute.

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

Помогает ли это?

Ответ 6

Эти два курса из академии кода должны хорошо описывать позиционирование CSS:

Сначала, Вторые.