Свойство позиции в CSS используется для установки позиции элемента на странице. С помощью этого свойства вы можете разместить любой атрибут там, где считаете нужным.
Атрибут позиции указывает тип позиционирования элемента. Этот атрибут определяет механизм позиционирования, используемый для определения макета элемента. Любой элемент может быть позиционирован, но абсолютные или фиксированные элементы создают блок уровня блока, независимо от типа самого элемента. Относительно позиционированный элемент смещается от своего положения по умолчанию в обычном потоке.
Атрибут позиции указывает тип метода позиционирования, примененного к элементу (статический, относительный, фиксированный, абсолютный или прикрепленный):
Элементы фактически позиционируются с использованием атрибутов top, low, left и right. Однако эти свойства не имеют никакого эффекта, если сначала не установлено свойство позиции. Они работают по-разному в зависимости от значения позиции.
1. Статическое позиционирование: статическое
HTML-элементы по умолчанию располагаются статически.
На статически позиционированные элементы не влияют верхние, нижние, левые и правые атрибуты.
Элемент с положением: static; не позиционируется каким-либо особым образом; он всегда позиционируется в соответствии с обычным потоком страницы:
Пример:
<!DOCTYPEhtml><html><head><style>div{height:100px;border:1pxsolidblack;}div.static{width:130px;height:50px;background-color:#CCC;line-hei ght:50px;text-align:center;position:static;top:50px;left:20px;</style></head><body><div><divclass=static>item;</div></ div></body></html>Результаты запуска:
2. Относительное позиционирование: относительное
Пример:
<html><head><styletype=text/css>#item1{ширина:100px;высота:100px;background-color:green;}#item2{ширина:100px;height:100px;bac ground-color:red;</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div></div></body ></html>Результаты запуска:
Если вы измените файл стиля CSS в коде следующим образом:
<html><head><styletype=text/css>#item1{ширина:100px;высота:100px;цвет фона:зеленый;}#item2{ширина:100px;высота:100px;цвет фона:красный; позиция: относительное; слева: 20 пикселей; сверху: 20 пикселей; </style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div>< /div></body></html>Результаты запуска:
Сводка: Относительное — это смещение относительно позиции в обычном потоке документов. Первоначально занятая позиция все еще существует, а это означает, что она не влияет на позицию последующих элементов. «Слева» означает смещение относительно правой стороны исходного положения, а «сверху» означает смещение относительно нижней части исходного положения. Когда левое и правое существуют одновременно, действителен только левый. Когда одновременно существуют верх и низ, действителен только верх. Относительное смещение основано на верхней левой части поля объекта.
3. Абсолютное позиционирование: абсолютное
Пример:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# со ntent{margin-left:100px;margin-top:100px;</style></head><body><divid=content><divid=item1>item1</div><divid=item2>item2</div ></div></body></html>Результаты запуска:
При изменении файлов стилей CSS:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: абсолютный;слева: 20px;top:20px;}#content{margin-left:100px;margin-top:100px;</style></head><body><divid=content><divid=item1>item1</div>< divid=item2>item2</div></div></body></html>Результаты запуска:
Видно, что когда значение атрибута позиции родительского элемента является значением по умолчанию (статическим), абсолютное позиционируется относительно окна браузера.
Если для атрибута позиции содержимого установлено значение, отличное от значения по умолчанию, то абсолютное позиционируется относительно родительского элемента:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;position: абсолютный;слева:20px;сверху :20px;}#content{margin-left:100px;margin-top:100px;position:relative</style></head><body><divid=content><divid=item1>item1</div>< divid=item2>item2</div></div></body></html>Результаты запуска:
Продолжайте изменять стиль CSS:
<html><head><styletype=text/css>#item1{width:100px;height:100px;background-color:green;}#item2{width:100px;height:100px;background-color:red;}# контент {margin-left: 100px; маржа gin-top:100px;position:absolute;padding:20px;border:10pxsolidblack;</style></head><body><divid=content><divid=item1>item1</div><divid=item2> элемент2</div></div></body></html>Результаты запуска:
Вы заметили изменение? Когда для внешнего элемента div установлено абсолютное значение, ширина внешнего элемента div меняется со 100% на автоматический.
Когда вы устанавливаете для свойства позиции элемента значение «абсолютное» или «фиксированное», происходят три вещи:
(1) Переместите элемент на один слой в направлении оси Z. Элемент выходит за рамки обычного потока, поэтому он больше не занимает пространство исходного слоя и будет закрывать элементы нижнего слоя.
(2) Элемент станет элементом уровня блока, что эквивалентно настройке display:block; для элемента (укажите встроенный элемент, например <span>, и после установки абсолютного значения вы обнаружите, что он может установить ширина и высота).
(3) Если элемент является элементом уровня блока, ширина элемента изменяется с исходной ширины: 100% (занимает одну строку) на авто.
4. Фиксированное позиционирование: фиксированное
Фиксированное позиционирование — это позиционирование элемента относительно окна браузера. Элемент, использующий фиксированное позиционирование, не будет перемещаться из-за прокрутки окна браузера, как если бы он был зафиксирован на странице. Мы часто видим кнопку возврата наверх в Интернете. Это достигается за счет фиксированного позиционирования.
Пример:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; высота: 200 пикселей; ширина: 200 пикселей; </style></head><body><divclass=outstyle=posit ion:relative;><divclass=instyle=background-color:wheat;></div><divclass=instyle=background-color:red;position:fixed;left:20px;bottom:10px;></div>< divclass=instyle=background-color:blue;></div></div></body></html>Результаты запуска:
5. Липкое позиционирование: липкое
Закрепленное позиционирование отличается от четырех методов позиционирования, представленных ранее. Оно похоже на комбинацию относительного позиционирования и фиксированного позиционирования. Когда страница прокручивается, его эффект такой же, как и при относительном позиционировании. Когда элемент прокручивается до определенной степени. появится снова. Исправлен эффект позиционирования. Например, меню навигации на некоторых веб-страницах находится в положении по умолчанию при загрузке страницы и фиксируется в верхней части страницы при прокрутке вниз.
Пример:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title></title><style>.out{border:red1pxsolid;height:600px;width:500px;}.in{border:blue1pxsolid; высота: 200 пикселей; ширина: 250 пикселей; </style></head ><body><divclass=out><divclass=instyle=background-color:пшеница;></div><divclass=instyle=background-color:red;></div><divclass=instyle=background-color: синий;></div></div></body></html>Результаты запуска:
