FrontEndEgitimi-CSS/position.html at master · TanerSaydam/FrontEndEgitimi-CSS · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* static, positin için default */
            /* div.static{
                border: 3px solid green;
                left: 30px;
                position: static;

            } */

            /* div.relative{
                border: 3px solid green;
                left: 30px;
                top: 100px;
                position: relative;
            } */

            /* div.fixed{
                border: 3px solid red;
                bottom: 0;
                right: 0;
                width: 300px;
                position: fixed;
            } */

            div.relative{
                position: relative;
                width: 400px;
                height: 200px;
                border: 3px solid green;
            }

            div.absolute{
                position: absolute;
                top: 80px;
                right: 0;
                width: 200px;
                height: 100px;
                border: 3px solid red;
            }

            div.sticky{
                border: 2px solid red;
                background-color: greenyellow;
                top: 0;
                padding: 5px;
                position: sticky;
            }

            </style>
    </head>
    <body>
        <!-- Sana döneceğiz -->
        <!-- <h1>Position</h1>
        <h4>static</h4>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eaque, provident doloremque.
        </p>

        <div class="static">
            Lorem ipsum dolor sit amet.
        </div>
        <hr>
        <h4>relative</h4>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora, praesentium!</p>

        <div class="relative">
            Lorem ipsum dolor sit amet.
        </div> -->
        <!-- <hr>
        <h4>fixed</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, sit.</p>

        <div class="fixed">
            Lorem ipsum dolor sit.
        </div> -->
        <!-- <h4>absolute</h4>

        <div class="relative">
            Lorem ipsum dolor sit amet.
            <div class="absolute">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, eius?
            </div>
        </div> -->


        <hr>
        <h3>sticy</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, deleniti! Repudiandae ab laudantium ipsum dolorem?</p>

        <div class="sticky">I am sticky!</div>

        <div style="padding-bottom: 2000px;">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt mollitia, a neque nobis saepe sint et inventore cupiditate, ex quidem aliquid in, dolore soluta aspernatur natus ullam voluptatem. Atque, culpa!
            Nesciunt sequi expedita nulla dicta. Libero possimus vero ut natus. Architecto at eaque debitis dolorem libero inventore consectetur adipisci perferendis amet sunt, quia doloribus impedit quae alias illum tempora veritatis.
            Molestiae corrupti eveniet assumenda voluptatibus ad dolore, a ullam esse quos sapiente maiores perspiciatis ipsum, reprehenderit aperiam sequi similique maxime quam iste dolorum odio, excepturi quisquam iure placeat! Repellat, eius?
            Recusandae ratione at dolor dignissimos quod facilis eum totam deserunt nemo. Earum quia temporibus quos minus vel, hic, impedit excepturi accusamus pariatur aliquam consequatur, culpa velit repellat ducimus enim. Illum.
            Voluptatum nihil nostrum, facilis quis dignissimos, minima deleniti quaerat neque autem consectetur id nesciunt, nobis ducimus odit culpa quia perspiciatis laborum. Similique quos cupiditate cum ratione, delectus dignissimos porro mollitia?
            Sed, temporibus aliquid quibusdam aliquam esse explicabo ullam autem sequi eaque non recusandae! Veritatis neque praesentium consequatur. Aliquid quos, nihil quam, voluptatum perferendis nobis corrupti placeat quasi doloribus illo consectetur!
            Sunt alias impedit nulla exercitationem facere numquam, fugiat quidem excepturi eaque quam dolor velit. Inventore eligendi, commodi ipsum corrupti suscipit quasi. Sit velit maiores totam explicabo, blanditiis perferendis tempore commodi.
            Doloremque ipsum dolores expedita ab quibusdam blanditiis, consequatur tempora placeat, quos nulla beatae veniam itaque recusandae deserunt porro temporibus odit iure qui ipsa magnam velit quasi saepe quidem. Optio, repudiandae?
            Harum necessitatibus maiores in nam repellendus debitis atque. Autem nemo mollitia quod reprehenderit perspiciatis. Amet animi, praesentium voluptatem beatae officiis nesciunt qui dolorem voluptates hic reprehenderit magni quo illo optio?
            Ab non sed alias accusamus fugit explicabo officia expedita corrupti quaerat deserunt quisquam laborum, harum in? Suscipit doloribus nobis et neque, impedit animi sed. Natus neque unde cupiditate ducimus laudantium?</p>
        </div>
    </body>
    </html>
</body>
</html>