CSS свойство позиционирования (определения местоположения) позволяет элементам позиции.
позиционирование CSS и плавающей
CSS предоставляет несколько атрибутов для позиционирования и плавающих, использование этих свойств, вы можете создать макет столбца, часть перекрывающуюся с другой частью макета, вы также можете выполнить задачу, часто требует использования нескольких форм на протяжении многих лет, чтобы закончить.
Основная идея позиционирования очень проста, она позволяет определить позицию элемента относительно его нормального положения коробки должна появиться, или относительно родительского элемента, а другой элемент окна браузера даже позиционировать себя. Создание фронтального обучения qun438905713, большинство в группе с нуля учащихся, мы помогаем друг другу, отвечать друг другу, а также подготовить много учебных материалов, приветствовали с нуля младшего партнера для обмена.
Все коробки
DIV, h1 или р элемент часто упоминается как блочные элементы. Это означает , что эти элементы отображаются в виде части содержимого , а именно «структурного блока.» В противоположность этому , сильные и диапазона элементы , такие как «строковый элемент», потому что их содержимое в строках, то есть «инлайн - боксы.»
Вы можете изменить тип атрибутов отображения сгенерированных окно. Это означает, что ведут себя как блочные элементы, как с помощью дисплея собственности блока, позволяют встроенные элементы (такие как <a> элементов). Дисплей также может быть установлен на нет, так что не существует никакого элемента генерируемого бокса. В этом случае, коробка и все ее содержимое больше не будут появляться, не занимают места в документе.
В одном случае, однако, даже если явно не определено, а также создает блочные элементы. Это происходит, чтобы добавить текст до блочных элементов (например, DIV), в самом начале. Даже без этого текста определяется как пункт, это будет рассматриваться как пункт:
<DIV> некоторый текст <р> то текст. </ p> </ DIV>
В этом случае поле называется анонимный бокс блока, поскольку он не связан с элементами конкретно определены.
Текстовая строка элементов уровня блока Аналогичная ситуация имеет место. Предположим, что есть три строки текста содержит параграф. Каждая строка текста формирования неизвестного кадра. Нет прямой линии анонимных блоков или не применять коробку стиля, потому что нет места для применения стилей (Обратите внимание, что линия коробки и встроенные коробки два понятия). Тем не менее, это помогает понять все на экране, чтобы увидеть все формы какого-то ящик.
механизм позиционирования CSS
Есть три основных механизма позиционирования CSS: общий поток, поплавок, и абсолютное позиционирование.
Если не указано иное, все ящики находятся в общем потоке. То есть, положение элемента в нормальном потоке определяется положением элемента (X) HTML есть.
Блок уровня блока от верхней части к нижней части расположены одна за другой, расстояние по вертикали между кадрами рассчитывается по вертикали от наружной рамы.
Встроенные ящики расположены горизонтально в ряд. Горизонтальная прокладка может использоваться, границы и отступы для регулировки интервалов между их. Тем не менее, вертикальные поля, границы, поля, и не влияет на высоту строки внутреннего каркаса. Горизонтальная рама образована линия называется линия коробка (Box Line) , высота линии коробки всегда достаточно , чтобы держать все строки внутренней рамки он содержит. Тем не менее, вы можете установить высоту строки , чтобы увеличить высоту коробки.
положение CSS свойство
Используя свойство позиции, мы можем выбрать один из четырех различных типов позиционирования, что влияет на то, как коробка элемента генерируется.
Свойство Значение значения позиции:
статический
элемент нормального блока генерация. Элементы уровня блока генерируют прямоугольную раму, так как часть потока документа, встроенные элементы создают один или несколько коробок строки, помещенные в родительском элементе.
Статический атрибут по умолчанию позиции, позиционирование по умолчанию всех элементов позиция: статический.
относительные
элементы от сдвига кадра. форма элемента , прежде чем их останки нелокализованные, место , которое он занимал остается.
Вы можете использовать сверху, снизу, слева и справа относительно исходного положения элемента в документе , чтобы переместить этот элемент.
Абсолютный
поток блочного элемента полностью удаляется из документа, и позиционируется относительно его содержащего блока. Содержащий блок может быть другой элемент в документе изначально содержала или блоки. Оригинальные элементы в нормальном потоке документа пространства , занимаемые будут закрыты, так как если элементы оригинала не существуют. Создание элемента уровня блока , расположенный после кадра, независимо от того, какого типа кадра он генерируется в нормальном потоке.
Топ могут быть точно установлены в соответствии с, снизу, слева и справа в положение
неподвижные
элементы рамы аналогична позиции производительности устанавливается в абсолютной, но который сам блок , содержащий окно.
Это свойство часто используется в фиксированном положении по подвесному элементу страницы. Модули , такие как правильный ответ на настоящую страницу.
Примечание: IE6 не поддерживает это свойство
