cssLayoutExamples/positioning.html at master · jayRoney/cssLayoutExamples · GitHub

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
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Positioning Examples</title>
    <link href = "Stylesheet.css" type = "text/css" rel = "stylesheet">

</head>
<body>

<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
not be positioned in any way out of the norm.</p></div>

<div class = "relative"><p>This is an element in relative positioning.</p></div>

<div class = "relative2"><p>This is an element in relative positioning also. An element in relative positioning
doesn't really move unless you add some more properties to it!</p></div>

<div
        class = "fixed"><p>This is a fixed element. It stays where you tell it to even when the user scrolls up or down
    the window.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>
<div class = "static"><p>This is an element in static positioning. An element with a static position is said to
    not be positioned in any way out of the norm.</p></div>


<div class = absoluteParent>
    <div class = "absolute">
        <p>This element behaves like fixed but it's fixed to it's parent, if that makes any sense. It'll continue to
        scroll along the page like any other relative element but it'll be stuck to it's parent, pretty similar to
            how fixed is stuck to the document body.</p>
    </div>
</div>
</body>
</html>