-
Notifications
You must be signed in to change notification settings - Fork 0
/
positions.html
52 lines (50 loc) · 16.2 KB
/
positions.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
<html>
<head>
<title>Positions</title>
<style>
.static{
background-color: bisque;
position: static;
top: 10%;
}
.relative{
background-color: gray;
position: relative;
top: 15%;
left: 5%;
/* margin-top: 5%; */
}
.sticky{
background-color: rgb(78, 47, 10);
height: 5%;
position: sticky;
top: 0;
}
.fixed{
background-color: rgb(227, 116, 116);
padding: 2%;
position: fixed;
bottom: 10%;
right: 5%;
}
</style>
</head>
<body>
<!--
static
relative
absolute
sticky
fixed
top
left
right
bottom
-->
<div class="static">Hello Static class</div>
<div class="relative">Hello relative class</div>
<div class="sticky">I am Sticky here</div>
<div class="fixed">Fixed</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque deserunt eligendi magni perspiciatis eveniet officia quam laudantium, blanditiis debitis, enim cumque, iste aliquid pariatur inventore obcaecati eos aspernatur quo accusantium. Possimus nihil laboriosam praesentium, consequuntur ex quibusdam reiciendis natus corporis esse mollitia illum ipsa, eaque accusantium perferendis ut voluptatum cupiditate! Iusto saepe fugit delectus assumenda, unde repellendus repudiandae exercitationem, consectetur, dicta doloremque sed pariatur soluta illum doloribus! Tempora optio voluptatem repudiandae expedita, reprehenderit voluptates ullam eaque eos magnam eum sunt porro quisquam aspernatur accusamus quasi. Incidunt repudiandae voluptatum corporis assumenda animi, odio reiciendis magni alias. Itaque culpa aspernatur doloremque tempore ad aut maxime non praesentium esse vero nisi, sint laborum, recusandae exercitationem voluptates necessitatibus, quos voluptatibus deserunt ex? Praesentium similique animi corrupti quasi ut magnam soluta consequatur porro cupiditate nulla rerum hic, possimus sapiente, repellat temporibus, error maiores. Dignissimos et beatae accusantium error dolore itaque nulla eum molestias ratione vitae. Dicta eligendi doloremque est. Iusto voluptatibus voluptatem eos consequatur dolore vitae sit corrupti maiores asperiores, ad magnam animi! Unde delectus at quas autem quae voluptatibus quod rerum adipisci earum, dolore fugiat exercitationem ipsa quia eos quis? Voluptatibus, suscipit quisquam. Ex obcaecati perferendis voluptatibus, dolorum, quibusdam, ad sunt commodi suscipit quidem dolorem doloribus placeat tenetur corporis libero temporibus debitis nemo iusto architecto quam maiores similique ratione repudiandae! Temporibus optio ducimus quae quis atque rerum quia doloribus sunt delectus accusantium excepturi tempore quam quisquam dignissimos ipsum magni dicta, consequuntur assumenda sint maiores, aut qui? Nihil minima cupiditate exercitationem dolores magni distinctio eaque inventore, asperiores beatae fuga consequatur excepturi ad odit atque fugiat totam repellat nulla? Quidem sapiente cupiditate ea quis repudiandae, blanditiis omnis! Nulla consectetur temporibus ex aspernatur inventore fugit ipsa error delectus id et accusantium dolores similique, veritatis fuga reiciendis laborum neque dolorum deleniti sit velit facilis dignissimos soluta amet maiores. Quas mollitia odit maiores inventore numquam eligendi, a quam itaque amet laudantium tempore maxime veritatis ad tenetur culpa, at quasi. Quisquam facere omnis corrupti voluptatum eligendi qui illum dicta voluptas velit, vel, inventore nulla ratione, nihil asperiores. Voluptates facilis, itaque ad quam quae at. Dolorum ratione corporis cum, a quibusdam in, placeat ad amet fugit rerum nam libero veritatis dolore totam perferendis vitae eum officiis laudantium reprehenderit debitis tempora similique consequatur! Voluptatem repudiandae provident modi vel! Natus pariatur debitis vero saepe exercitationem nisi perspiciatis dignissimos odit eaque officia repellendus sequi dolores, laudantium libero possimus tenetur excepturi dolore impedit et omnis ut id fuga! Doloribus sapiente autem, dolores sequi omnis pariatur laboriosam cupiditate temporibus at hic animi beatae expedita aspernatur libero quos. Sit quae mollitia eos. Eius commodi beatae nisi maxime atque distinctio ipsam dolorem odio nostrum! Aperiam voluptatum, eaque ducimus quos earum atque ipsam temporibus officia exercitationem accusantium molestiae nisi magni odio repellat dignissimos numquam harum! Omnis rem distinctio quisquam cupiditate, repellat provident reprehenderit, at enim voluptatem officia sequi facere eum placeat laborum veritatis eveniet odit molestias, architecto hic. Officiis ipsum quo est voluptatem eos. Inventore repellat necessitatibus quam, voluptatibus rem nostrum vel qui, illum, accusamus voluptas similique est repellendus! Laudantium repellat possimus rerum magnam beatae repellendus cupiditate nesciunt architecto in corporis unde, fuga at molestiae ab libero eius! Illum ipsa, suscipit, veritatis cumque cum quas architecto quod dolorum reiciendis unde, ea harum facere. Quo ex, exercitationem maxime illum fugit laboriosam harum quae quidem accusamus consequatur dolorem inventore facere ratione voluptatibus vero, veritatis labore debitis nobis beatae vel deleniti? Modi repellat at, eveniet iste veritatis quod dignissimos aspernatur, ex placeat officiis tenetur necessitatibus nesciunt magni, cumque ipsa. In natus pariatur veniam doloribus soluta facilis incidunt. Eveniet ea non itaque qui harum, nesciunt omnis distinctio ut quasi provident rem fugiat sequi atque recusandae, facilis reiciendis cupiditate suscipit perspiciatis saepe beatae earum ducimus soluta velit voluptatem. Optio ut sunt doloribus et nobis modi earum voluptatibus adipisci dolores delectus illo illum iusto culpa quo veniam natus, pariatur perferendis libero autem nesciunt? Enim assumenda molestiae totam hic eaque maiores dignissimos mollitia dolorem unde, voluptatem quam debitis consequatur asperiores sunt, impedit tempora doloremque quia explicabo, voluptas quibusdam praesentium illum! A repellat inventore deleniti accusamus atque ipsam. Et eligendi quia modi aliquid. Voluptas dolorum alias dolores, in error quod reprehenderit non maiores nobis esse autem tempore ad architecto dignissimos fuga velit fugit hic eligendi. Velit repudiandae vitae dicta. Commodi nostrum nesciunt culpa laborum quibusdam quasi excepturi beatae, libero quas aperiam ullam voluptate dolores sapiente accusantium maiores natus ratione perferendis laudantium necessitatibus sunt, voluptas adipisci labore! Totam error cupiditate, nostrum quas numquam nemo. Labore harum ex autem omnis incidunt iste in aspernatur reiciendis id iusto ratione vero accusamus itaque asperiores molestias nisi doloribus ipsam sint fugit voluptas, impedit est. Dolor pariatur quibusdam sint tenetur, aliquid numquam aspernatur magni ratione suscipit, earum asperiores. Vel minus exercitationem optio soluta culpa perspiciatis commodi! Dignissimos consectetur aliquam commodi repellat delectus ullam placeat. Expedita eos reprehenderit illum error aliquam quis necessitatibus autem accusantium distinctio quod. Ea sit minus qui beatae numquam aliquid magni laboriosam. Ratione vel accusamus consectetur porro laboriosam nam minus deserunt, reprehenderit aspernatur veniam dolore? Fuga eos, sit doloribus eaque eligendi pariatur quasi nesciunt laborum quos aperiam doloremque aliquam accusantium natus modi cupiditate voluptatum ullam accusamus! Sit earum sequi error, voluptates quisquam maxime autem obcaecati, iusto architecto ipsum eveniet libero laudantium molestiae eius atque cum et quis. Repudiandae, corporis! Praesentium, voluptatem veritatis. Quidem ipsam, neque facere amet pariatur illo nostrum labore consectetur voluptatibus a harum id maxime! Nostrum nesciunt beatae ipsam rerum atque! Quod ipsa repudiandae suscipit sint quis, animi beatae fugiat adipisci amet minus fuga debitis voluptatibus non dolore libero ipsam earum laudantium quam, odit consequatur placeat, dolorum officiis. Explicabo consectetur quasi architecto aliquam reprehenderit, beatae, officiis voluptates facilis recusandae, sit velit. Enim quam voluptas facilis recusandae fuga distinctio earum magni ratione veniam mollitia dolore porro voluptatum deleniti et expedita sed dignissimos voluptate velit vel, ad minima dolor! Odit aperiam laudantium earum ducimus iste obcaecati tempore incidunt quisquam? Esse consequuntur recusandae temporibus autem dignissimos quod sed id accusantium accusamus ullam reiciendis, saepe laborum et velit magnam vero, rerum aperiam minima obcaecati iste nesciunt corrupti doloremque quam? Facilis, aspernatur! Dolorum, ut ullam, expedita quis pariatur placeat ratione eligendi repellat nulla veniam saepe voluptatem. Ea odio eligendi vero reiciendis repudiandae tempore totam iste neque suscipit iusto beatae fugiat eaque mollitia deserunt nesciunt, sint in placeat quidem quod adipisci maiores at asperiores. Non itaque excepturi deleniti asperiores error autem blanditiis commodi repudiandae accusamus? Quod, esse odit inventore earum suscipit libero quia eos fuga natus minima aliquid possimus, aut minus blanditiis sed quo exercitationem quibusdam ex architecto ad culpa accusamus nulla. Distinctio, assumenda. Ipsum, eaque quae? Voluptatibus laborum voluptas suscipit quaerat distinctio obcaecati, cum laudantium dolorem iure quas dicta officia molestias natus est libero ipsum consectetur inventore itaque atque. Saepe, quisquam magnam possimus labore ipsum perferendis autem veniam quod maiores voluptate sapiente, nobis consequuntur pariatur ea porro! Nisi numquam incidunt reiciendis itaque beatae, consequatur, ipsa exercitationem ipsam rem molestiae, nam soluta quas hic doloribus labore nemo. Libero rerum nam voluptatum ullam eos a minima quia, mollitia sit officia quidem magnam consectetur impedit, dolor quis nobis iusto reprehenderit amet nemo! Quasi officiis iure architecto reiciendis placeat commodi atque tempora amet id aperiam cupiditate dolorem laudantium ducimus, libero dolor fugiat quo veritatis ut minus sequi beatae. Repellendus sint illum enim, corrupti reprehenderit aspernatur sunt quaerat libero! Iusto recusandae exercitationem maxime numquam aperiam quas voluptate, fuga quasi sunt id ad consequuntur tempore impedit hic laudantium explicabo libero officiis enim esse ipsam alias deserunt eos qui blanditiis. Tenetur atque veritatis rem nisi quibusdam, nam hic temporibus repellat ex maiores cum natus est corporis quod mollitia soluta assumenda, magni modi reprehenderit dolorum dolorem cumque consectetur vitae quos. Nisi ad ducimus explicabo fugit vitae, similique nobis est eligendi hic veritatis error, atque inventore dicta qui sunt excepturi non repudiandae minus quam odio nesciunt porro officia quibusdam. Totam obcaecati similique repellendus cumque sapiente dicta minima provident quia, placeat doloribus assumenda ea facilis voluptas quaerat cum, neque sunt eveniet incidunt eligendi sit! Consequatur in, architecto voluptatibus non dolor odio autem, aliquam quidem dolore porro nulla sapiente fugit minus sunt perferendis natus! Cupiditate iusto enim neque odio dolores consequatur eaque quibusdam necessitatibus eligendi tempora perferendis ratione impedit earum iste libero qui, minima possimus minus! Tempora optio officiis modi quam cum ratione dolor quisquam velit eligendi ab doloremque fuga rerum beatae, veritatis similique nostrum? Ullam doloremque accusamus atque at dicta eos iure est, eaque vel officiis, ipsam quasi dolorem qui expedita nemo maxime tenetur fugiat animi. Adipisci vel sapiente, odit laboriosam iure consequuntur veritatis deleniti error voluptatibus quia repellat, nesciunt odio eum perspiciatis voluptates aut molestias aliquam facilis doloribus eius. Molestiae quibusdam culpa sit praesentium quam, numquam velit eius fugiat sint est. Minima nam quae eos asperiores modi delectus ratione impedit, dicta, laudantium, corrupti illum sed molestias dolor unde labore error quis suscipit officia! Sapiente harum quasi autem incidunt qui deleniti, porro tempore dolorum placeat voluptatibus similique accusamus molestiae totam consequatur est distinctio ab, quos obcaecati vitae cum repellat debitis. Enim quae aspernatur est eos repellat exercitationem harum, sunt molestiae, provident tempore a illum beatae. Quod ipsam incidunt impedit assumenda deserunt repellat quidem a dolorum praesentium blanditiis, ullam illo fuga optio saepe ducimus, velit ad nemo accusantium et aperiam? Sit animi, voluptatibus explicabo ipsam iure facere vitae similique dignissimos voluptatum, obcaecati, doloremque repellat! Eos consectetur veritatis iusto molestias dolor accusamus eius sed dolores odio quam necessitatibus provident, doloribus aperiam dolore. Possimus quidem mollitia facilis sunt non iusto harum? Eius quisquam fuga quos ut, voluptatem quod magni dicta. Ut recusandae voluptatem reiciendis soluta laboriosam, natus culpa, voluptate non labore dolorum aliquam reprehenderit magni excepturi animi ratione sapiente ab atque id sequi deserunt laborum repellendus odit assumenda voluptatibus? Necessitatibus et impedit ipsum, placeat ut quod! Aperiam veniam repellendus quod, sunt obcaecati doloremque eius deserunt animi impedit officiis laborum quisquam labore? Eos, facere. Ullam sit cumque qui eos! Libero, incidunt ducimus magnam tenetur quibusdam voluptas porro! Non error saepe illo. Autem nihil iste ad aliquam distinctio cupiditate quia itaque, corrupti ea! A sit nihil ab, earum, vel eligendi corrupti reiciendis, autem quis explicabo repellat! Ipsa commodi explicabo saepe recusandae ea? Sunt sed mollitia odit omnis quisquam ab commodi ullam ex explicabo dolore unde placeat molestias quaerat, ratione vero ut officiis possimus, repellendus deserunt similique at, soluta architecto tempora! Voluptatem esse, facilis reprehenderit quibusdam unde assumenda minus! Repudiandae consectetur aliquam vitae maiores facere in nemo, alias a similique rem impedit quae modi aperiam. Mollitia non laboriosam amet voluptate, et consectetur aut, nulla corrupti cupiditate ea quia magni neque repellat tempore voluptates dolore veniam eligendi vero officiis quisquam tempora. Facilis deserunt quos cupiditate velit quibusdam accusamus doloremque commodi debitis minima, hic perspiciatis, dolorem quo magnam nemo molestias exercitationem nobis pariatur consequatur nulla. Harum laudantium excepturi, non perspiciatis beatae impedit debitis! Id dolorum maiores rem aliquid natus. Beatae possimus quas expedita ex obcaecati velit amet fugit sint tenetur nulla laudantium, sit provident doloremque quia recusandae sed fugiat labore, repellat consequuntur quaerat at esse? Ut est laboriosam aperiam reiciendis mollitia distinctio amet, nihil, odit, perferendis impedit sequi. Odio tempore numquam quibusdam obcaecati magni alias tenetur sed voluptatibus? Ullam vel, adipisci doloribus, aperiam autem quam dicta, aspernatur excepturi dignissimos eius cumque ratione distinctio. Sed quisquam totam incidunt obcaecati ipsa pariatur vel quo, veritatis dolorum aliquid dolorem eligendi expedita fugiat nihil. Dolorem molestias modi ab nisi qui fuga cumque est amet vero ullam! Quia quas atque nam quos alias quisquam iste labore mollitia quae sunt fugiat fuga nisi rem dolorem, vitae ab facere dolore, reiciendis consectetur dicta distinctio recusandae impedit sequi. Perferendis ea aut inventore ducimus, eaque alias voluptatem minus tempore totam. Eum, mollitia quibusdam? Eos repudiandae blanditiis inventore? Iure exercitationem nam obcaecati nostrum nesciunt neque! Dolores reprehenderit aperiam eos ad provident eum quibusdam delectus quia ab, odit iure temporibus ducimus alias soluta illo. Distinctio accusantium cupiditate minima ipsa doloremque sint dolores corrupti, nostrum maxime assumenda architecto animi cumque. Totam consequuntur suscipit illo, vitae possimus error distinctio voluptate iusto accusamus quam molestiae minima aspernatur est modi magnam quae harum, animi voluptas? Est labore quibusdam officia unde. Eum totam debitis beatae ex iusto cum error, optio tempore consequatur reprehenderit! Adipisci, odit obcaecati.</p>
</body>
</html>