-
Notifications
You must be signed in to change notification settings - Fork 0
/
lesson_8_1.html
139 lines (139 loc) · 4.91 KB
/
lesson_8_1.html
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Position | Frontend Basics</title>
<meta charset="utf-8">
<meta content='NOINDEX, NOFOLLOW' name='robots'>
<meta name="description" content="Position | Frontend Basic">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/@shower/ribbon/styles/styles.css">
<link rel="stylesheet" href="fontawesome-free-5.14.0-web/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body class="shower list">
<header class="caption">
<h1>Position | Frontend Basics</h1>
<p>Frontend Cheat Sheet</p>
</header>
<section class="slide slide--title">
<h2>Position</h2>
</section>
<section class="slide">
<h2>Agenda</h2>
<ol>
<li>CSS position</li>
<li>Positioning types and use cases</li>
</ol>
</section>
<section class="slide">
<h2>Position</h2>
<blockquote>
<p>
The <code>position</code> CSS property sets how an element is positioned in a document.
</p>
</blockquote>
<code style='font-size: 24px;'>position: static | relative | absolute | fixed | sticky</code>
</section>
<section class="slide">
<h2>Position</h2>
The
<code>top</code>,
<code>right</code>,
<code>bottom</code>,
and
<code>left</code>
properties determine the final location of positioned elements.
</section>
<section class="slide">
<h2>Static</h2>
The element is positioned according to the normal flow of the document.
The
<code>top</code>,
<code>right</code>,
<code>bottom</code>,
<code>left</code> and
<code>z-index</code>
properties have no effect.
This is the default value.
</section>
<section class="slide">
<h2>Relative</h2>
The element is positioned according to the normal flow of the document, and then offset relative
to itself based on the values of
<code>top</code>,
<code>right</code>,
<code>bottom</code>,
and
<code>left</code>.
The offset does not affect the
position of any other elements; thus, the space given for the element in the page layout
is the same as if position were static.
</section>
<section class="slide">
<h2>Absolute</h2>
The element is removed from the normal document flow, and no space is created for the element in the page layout.
It is positioned relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the
initial containing block. Its final position is determined by the values of
<code>top</code>,
<code>right</code>,
<code>bottom</code>,
and
<code>left</code>.
</section>
<section class="slide">
<h2>Fixed</h2>
The element is removed from the normal document flow, and no space is created for the element in the page layout.
It is positioned relative to the initial containing block established by the viewport, except when one of its
ancestors has a transform, perspective, or filter property set to something other than none,
or the will-change property is set to transform, in which case that ancestor behaves as the containing block.
Its final position is determined by the values of top, right, bottom, and left.
</section>
<section class="slide">
<h2>Sticky</h2>
The element is positioned according to the normal flow of the document, and then offset relative to its nearest
scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements,
based on the values of
<code>top</code>,
<code>right</code>,
<code>bottom</code>,
and
<code>left</code>.
The offset does not affect the position of any other elements.
</section>
<section class="slide">
<h2>z-index</h2>
<figure>
<blockquote>
<p>
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items.
Overlapping elements with a larger z-index cover those with a smaller one.
</p>
</blockquote>
<figcaption>
<a href="https://developer.mozilla.org/docs/Web/CSS/z-index" target="_blank">MDN</a>
</figcaption>
</figure>
</section>
<section class="slide">
<h2>Stacking context</h2>
<figure>
<blockquote>
<p>
The stacking context is a three-dimensional conceptualization of HTML elements along an
imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage.
HTML elements occupy this space in priority order based on element attributes.
</p>
</blockquote>
<figcaption>
<a href="https://developer.mozilla.org/ru/docs/Web/CSS/z-index" target="_blank">MDN</a>
</figcaption>
</figure>
</section>
<footer class="badge">
<a href="/">Home</a>
</footer>
<div class="progress"></div>
<script src="node_modules/@shower/core/dist/shower.js"></script>
<!-- <> -->
</body>
</html>