Позиционирование

Позиционирование элементов в HTML.

  Позиционирование элементов в HTML имеет очень много проекций и форматов, но если выбросить все случаи, которые являются производными от основных, то останется всего-навсего несколько значений свойства position (позишн), которые позволяют маневрировать положением элементов языка HTML практически в полном масштабе.

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

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

  Как Вы уже наверняка догадались за позиционирование элементов в HTML отвечает свойство элемента position и если прописать его в элементе, который его поддерживает, то элемент можно практически расположить в любом месте страницы и (о ужас) даже за её видимыми пределами, хотя зачем так напрягать машину я не очень понимаю, возможно, чтобы не напрягать машину с обрезкой элементов в случае когда элемент вдруг понадобится целиком.

 Если укказать в свойстве элемента значение absolute (position=»absolute»), то Ваш элемент будет всегда располагаться в левом верхнем углу страницы, потому что абсолютное позиционирование элементов в HTML всегда связано с координатами, а поскольку у нас порописано только свойство, то браузер просто не знает, где отобразить этот элемент.

 Допустим у нас есть картинка, которую мы хотим разместить где-то посередине <img href=»C://images/1.png» style=»position:absolute;»></img>, но с такими атрибутами она находится в левом верхнем углу. Чтобы это изменить, нужно дописать в какую сторону и насколько мы хотим подвинуть расположение картинки. Для этого используют свойства right, left, top и bottom, причём свойства left и top всегда имеют более высокий приоритет, по сравнению с остальными.

 То есть, если будут указаны все четыре свойства, противоречащие друг другу, то браузером будут учитываться только left и top, остальные будут игнорироваться, хотя для корректного отображения вполне достаточно и этих двух. Двигаем картинку <img href=»C://images/1.png» style=»position:absolute; left: 300px; top: 200px;»></img>. Сохраняем документ, не забывайте после свойств ствить точку с запятой, чтобы браузеру было легче понять где заканчивается свойство, а где начинается следующее, и всё, наша картинка сместилась на количество пикселей, указанное в этих свойствах.

  Обратите внимание, баннер, расположенный вверху справа на этом сайте сделан именно с помощью этого приёма, потому что прописан он в правом меню, а отображается в шапке сайта справа. По умолчанию браузер использует значение static, что означает, что элемент выводится в общем потоке в том порядке, в котором он прописан в програмном коде.

 Если в свойстве position будет прописано значение fixed, то элемент всё время будет находиться в одном и том же месте относительно страницы, даже если пользователь будет прокручивать страницу. Такое свойство можно применять, например, к меню, если нужно, чтобы пользователь всё время его видел.

 Ещё одно значение, которое может быть использовано — это relative. Используется оно обычно для относительного позиционирования, то есть, положение элемента сдвигается относительно его исходного места. После сдвига место, на котором располагался элемент остаётся пустым, иными словами оно не заполняется другими элементами. Можно ещё добавить, что кроме пикселей можно использовать и другие единицы, например пункты, но в основном с пикселями работать гораздо проще, поэтому обычно их и используют.


——————————————————————————

Читайте также по теме:
Заработок в интернете для новичков


*Как заработать без вложений в сети

*Несложные способы заработать в сети
*Как написать статью и заработать на ней
*Реальный доход на бинарных опционах
*Как с нуля заработать на кликах в сети




Яндекс.Метрика Рейтинг@Mail.ru