Html-learning-stage/CssPosition.html at main · RaySpot1/Html-learning-stage · 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
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
    position: sticky;
    top: 0;
    padding: 5px;
    background-color: #cae8ca;
    border: 2px solid #4CAF50;

}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Note: IE/15 and earlier versions do not support sticky position.</p>
<div class="sticky">I am sticky!</div>

<div style="padding-bottom:2000px">

    <p>In this example, the sticky element sticks to the top of the page (top: 0),
when you reach its scroll position.</p>
    <p>Scroll back up to remove the stickyness.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
    <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te,
id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur
his ad. welcome to the page and instroduce your self as you come in.</p>

</div>
</body>
</html>

<!--The sticky positioning is intriguing-->

<!DOCTYPE html>
<html>
<head>
<style>

div.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}
</style>
</head>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin:auto;</p>

<div class="center">
    <p><b>Note: </b>Using margin:auto; will not work in IE8, unless a !DOCTYPEis declared!</p>
</div>

</html>

<!--Horizontally centering a block element using margin:auto can come handy-->
It's true and available. I'mean the sticky positioning. It literally stays on the page however
way you scroll the page. It's simple,  easy, and straigth foward to learn and understand. Welcome
to stikcy homepage. It's revealing.