Авторский знак. Авторский знак. Seosait21.ru Есть у человека надежда. Пока не поздно. Вгрызайся и изучай.

октябрь 2020
Пн Вт Ср Чт Пт Сб Вс
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31


Чувашия-это моя Россия

Задание положения в CSS.

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

Свойства сдвиги:

                           top
                           right
                           bottom
                           left

Значения:

                           длина
                           процент
                           auto
                           inherit

Начальное значение: auto. Применимо: К позиционируемым элементам (со схемой relative, absolute или fixed). Наследуется: Нет.

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

Подобным образом и значение свойства left определяет расстояние между левым краем охватывающего блока и левым внешним краем данного элемента. И снова положительные значения сдвигают элемент к центру охватывающего блока, а отрицательные - «толкают» его вовне. Согласно CSS расположение элементов определяют края области содержимого, а не отступов.

В первом примере при помощи процентных значений элемент размещается в левом нижнем углу охватывающего блока; 100% сдвиг сверху; 0% сдвиг слева:

                               div { 
                                     height: 120px; 
                                     width: ЗООрх; 
                                     border: lpx solid #000;
                                     }
                                     
                               img {
                                     position: absolute; 
                                     top: 100%; 
                                     left: 0%;
                                     }

Второй пример для размещения данного элемента в конкретной точке охватывающего использует длину в пикселах:

                               div.a {
                                     position: absolute; 
                                     height: 120рх;
                                     width: ЗООрх; 
                                     border: lpx solid #000;
                                     background-color: #CCC
                                     }
                                     
                               div.b {
                                     position: absolute; 
                                     top: 20px; 
                                     right: ЗОрх;
                                     bottom: 40px; 
                                     left: 50px; 
                                     border: lpx solid #000;
                                     background-color: #666
                                     }
                                     
                              < div class="a">
                              < div class="b">
                              < /div>
                              < /div>

Заметим, что указать длину и высоту элемента можно и опосредованно, задав для этого положение каждой стороны элемента по отношению к охватывающему блоку. Оставшееся при этом пространство отдается под размещаемый элемент. Однако если последний содержит свойства width и height, которые не согласуются с найденными значениями, в игру вступает ряд правил спецификации CSS, призванных устранить расхождение.

Третий пример показывает, что отрицательные смещения могут заставить элемент выйти за границы охватывающего блока:

                              div.a {
                                     position: absolute;
                                     height: 120px; 
                                     width: ЗООрх; 
                                     border: lpx solid #000;
                                     background-color: #CCC
                                     }
                                     
                              div.b {
                                     position: absolute; 
                                     top: -20px; 
                                     right: -ЗОрх;
                                     bottom: 40px; 
                                     left: 50px;
                                     border: lpx solid #000; 
                                     background-color: #666
                                     }
                                     
                              < div class="a">
                              < div class = "b">
                              < /div>
                              < /div>

seosait21.ru
HTML

seosait21.ru
CSS

seosait21.ru
Web-диз.
HTML ссылка CSS ссылка ...

seosait21.ru
JavaScript

seosait21.ru
PHP

seosait21.ru
JQuery
JavaScript ссылка PHP ссылка JQuery ссылка

seosait21.ru
SEO.

seosait21.ru
MySQL

seosait21.ru
XML
... ... ...

обратно на главную     назад    дальше     вперед

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: