Simondb
4 years ago
2 changed files with 90 additions and 0 deletions
+ 43
- 0
03-positioning/pos.css
View File
| @@ -0,0 +1,43 @@ | |||
| html{ | |||
| font-size: 30px; | |||
| } | |||
| .container{ | |||
| background-color: gold; | |||
| position: relative; | |||
| } | |||
| .relative{ | |||
| background-color: hotpink; | |||
| height: 150px; | |||
| position: relative; | |||
| left: 10px; | |||
| top: -20px; | |||
| } | |||
| .absolute{ | |||
| height: 200px; | |||
| background-color: maroon; | |||
| position: absolute; | |||
| width: 100%; | |||
| bottom: 10px; | |||
| left: 10px; | |||
| right: 10px; | |||
| top: 10px; | |||
| } | |||
| .fixed{ | |||
| height: 175px; | |||
| background-color: navy; | |||
| width: 100%; | |||
| position: fixed; | |||
| top: 0; | |||
| } | |||
| .sticky{ | |||
| height: 50px; | |||
| width: 100%; | |||
| background-color: palevioletred; | |||
| top: 10px; | |||
| position: sticky; | |||
| } | |||
+ 47
- 0
03-positioning/positioning.html
View File
| @@ -0,0 +1,47 @@ | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title> | |||
| hi | |||
| </title> | |||
| <link rel="stylesheet" href="pos.css" /> | |||
| </head> | |||
| <body> | |||
| <div class="container"> | |||
| <div class="relative"></div> | |||
| <div class="absolute"></div> | |||
| <div class="fixed"></div> | |||
| </div> | |||
| <p> | |||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas, | |||
| recusandae quae, possimus, hic repudiandae illo et sit id eaque doloribus | |||
| officiis maxime ducimus. Aliquid quibusdam consequuntur tenetur porro | |||
| distinctio. | |||
| </p> | |||
| <p> | |||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas, | |||
| recusandae quae, possimus, hic repudiandae illo et sit id eaque doloribus | |||
| officiis maxime ducimus. Aliquid quibusdam consequuntur tenetur porro | |||
| distinctio. | |||
| </p> | |||
| <div class="sticky"></div> | |||
| <p> | |||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas, | |||
| recusandae quae, possimus, hic repudiandae illo et sit id eaque doloribus | |||
| officiis maxime ducimus. Aliquid quibusdam consequuntur tenetur porro | |||
| distinctio. | |||
| </p> | |||
| <p> | |||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas, | |||
| recusandae quae, possimus, hic repudiandae illo et sit id eaque doloribus | |||
| officiis maxime ducimus. Aliquid quibusdam consequuntur tenetur porro | |||
| distinctio. | |||
| </p> | |||
| <p> | |||
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste voluptas, | |||
| recusandae quae, possimus, hic repudiandae illo et sit id eaque doloribus | |||
| officiis maxime ducimus. Aliquid quibusdam consequuntur tenetur porro | |||
| distinctio. | |||
| </p> | |||
| </body> | |||
| </html> | |||
Loading…