-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS-Positioning-V2.html
38 lines (35 loc) · 1.37 KB
/
CSS-Positioning-V2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positions</title>
<link rel="stylesheet" href="css-positioning.css">
</head>
<body>
<h2>Relative Position</h2>
<p>The relative value for the position property allows elements to appear within the normal flow a page, leaving space for an element as intended while not allowing other elements to flow around it.</p>
<div>
<code><div></code>
</div>
<div class="offset">
<code><div class= <br> "offset">
<br> left: 20px; <br> top: 20px;</code>
</div>
<div>
<code><div></code>
</div>
<hr>
<h2>Absolute Position</h2>
<p>
The absolute value for the position property is different from the relative value in that an element with a position value of absolute will not appear within the normal flow of a document, and the original space and position of the absolutely positioned element will not be preserved.
</p>
<section>
<code><section> <br> position: relative;</code>
<div class="offset2">
<code><div class="offset"> <br> position: absolute; <br> right: 20px; <br> top: 20px;</code>
</div>
</section>
<p> Absolutely positioned elements are moved in relation to their closest relatively positioned parent element. </p>
</body>
</html>