-
-
Save TaniaAlex/40a0a243b29ff03a578fcab3472d4289 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