Каскадные таблицы стилей. Позиционирование

Сентябрь 7, 2022

Главная
Алгебра
Каскадные таблицы стилей. Позиционирование

Содержание

2. Position: Absolute Absolute – при использовании этого значения, вы можете разместить элемент в произвольном месте страницы,
3. Position:Relative, Static, Fixed Relative – смещает блок относительно того места, в котором он находился бы без
4. position:absolute; left:200px; top:50px; position:relative; left:250px При задании абсолютного или относительно (absolute и relative) размещении блока используются
5. Абсолютные координаты Этот раздел отпозиционирован в абсолютной системе координат. Его верхний левый край расположен в точке
6. … function up(){if(window.document.all. block.style.pixelTop>-100) {window.document.all.block.style.pixelTop-=30; setTimeout("up();",500); }} … … [ Поднять блок ] [ Вернуть блок
7. Примеры относительных координат Этот блок находится в точке отсчета относительных координат А этот блок смещен вправо
8. Относительные координаты Сдвинуть слой
9. Линейные размеры: width и height Explorer: ... Netscape: ...
10. Visibility:hidden Visibility:visible function change() { next=current+1; if(next>1) next=0; window.document.all.item("list", current).visibility="hidden"; window.document.all.item("list", next).visibility="visible"; current=next; } Последовательность "list"
11. Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя
12. Visibility:hidden Visibility:visible function change() { next=current+1; if(next>1) next=0; window.document.all.item("list", current).visibility="hidden"; window.document.all.item("list", next).visibility="visible"; current=next; } Последовательность "list"
13. Порядок наложения блоков - z-index
14. Порядок наложения блоков - z-index
15. Пример z-index
17. Скачать презентацию

Слайд 2

Position: Absolute
Absolute – при использовании этого значения, вы можете разместить элемент

в произвольном месте страницы, указав абсолютные значения сдвига блока.
Координаты указываются относительно левого верхнего угла (чаще всего) окна, либо относительно левого верхнего угла охватывающего блока, для которого задано свойство Position: Relative
Блок со свойством Position: Absolute выбивается из общего потока и размещается поверх блоков идущих в общем потоке

Слайд 3

Position:Relative, Static, Fixed
Relative – смещает блок относительно того места, в котором

он находился бы без указания этого атрибута.
Static – оставляет блок в том месте, в котором его разместили в соответствии со стандартными тегами HTML.
Fixed – фиксирует блок в заданном месте экрана и при скроллинге страницы остается на месте

Слайд 4

position:absolute; left:200px; top:50px; position:relative; left:250px
При задании абсолютного или относительно (absolute и

relative) размещении блока используются четыре свойства:
Top – расстояние элемента от верхнего края окна браузера при использовании абсолютного смещения, или от верхнего края какого-либо элемента страницы при относительном размещении.
Right – расстояние элемента от правого края браузера при абсолютном размещении. Для относительного размещения свойство не используется.
Bottom – расстояние элемента от нижнего края браузера для абсолютного размещения. Для относительного размещения свойство не используется.
Left – расстояние элемента от левого края окна браузера при абсолютном размещении, или сдвиг влево от какого-либо элемента страницы при относительном размещении.

Слайд 5

Абсолютные координаты
solid; PADDING-LEFT: 10px; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: navy 2px solid; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px">

Этот раздел отпозиционирован в абсолютной системе координат. Его верхний левый край расположен в точке (20px;10px).

Слайд 6

…

…

…

MARGIN-LEFT: 40px">[ Поднять блок]

[Вернуть блок]

Закрыть окно

style="BORDER-RIGHT: navy 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: navy 2px solid; PADDING-LEFT: 10px; LEFT: 20px; PADDING-BOTTOM: 10px; BORDER-LEFT: navy 2px solid; WIDTH: 200px; PADDING-TOP: 10px; BORDER-BOTTOM: navy 2px solid; POSITION: absolute; TOP: 10px; HEIGHT: 100px">

Этот раздел отпозиционирован в абсолютной системе координат.

Слайд 7

Примеры относительных координат

Этот блок находится

в точке отсчета относительных координат

А этот блок смещен вправо на 50px

Слайд 8

Относительные координаты
Сдвинуть слой

Слайд 9

Линейные размеры: width и height
Explorer:
...

Netscape:

STYLE="color:white;">...

Слайд 10

Visibility:hidden Visibility:visible
function change()
{
next=current+1; if(next>1) next=0;
window.document.all.item("list",
current).visibility="hidden";
window.document.all.item("list",
next).visibility="visible";
current=next; }
Последовательность "list" - значение атрибута

ID раздела.
Вызов функции при этом помещен в гипертекстовую ссылку со схемой URL "javascript":

далее...

Вот как данный атрибут записывается в CSS:

...

Слайд 11

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и

фон.
При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним.
Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

Visibility:visible Visibility:hidden

Слайд 12