Created
August 12, 2018 20:53
-
-
Save prof3ssorSt3v3/046c00a120009a158666e2169601ea41 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Combining position relative and absolute</title> | |
| <meta name="viewport" content="width=device-width"> | |
| <link rel="stylesheet" href="main.css"/> | |
| <style> | |
| #main{ | |
| background-color: hsl(120, 30%, 80%); | |
| /* margin-top: 5rem;*/ | |
| position: relative; | |
| left: 1rem; | |
| } | |
| #box{ | |
| background-color: hsl(240, 30%, 80%); | |
| position: absolute; | |
| top: 3rem; | |
| left: 3rem; | |
| } | |
| footer{ | |
| background-color: hsl(60, 30%, 80%); | |
| margin-top: 10rem; | |
| position: relative; | |
| top: 2rem; | |
| left: 8rem; | |
| } | |
| footer::after{ | |
| position: absolute; | |
| content: 'abs'; | |
| display: block; | |
| background-color: red; | |
| top: 0; | |
| left: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Combining position relative & absolute</h1> | |
| </header> | |
| <main id="main"> | |
| <div id="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, blanditiis dicta. Et magni reprehenderit quisquam cumque architecto omnis quos quaerat, voluptatibus quae a corporis cum quibusdam dolor, dolores reiciendis quasi?</div> | |
| </main> | |
| <footer><p>© 2018 Chicken Stuff Inc.</p></footer> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment