2 changed files with 92 additions and 0 deletions
+ 38
- 0
03-positioning/positioning.css
View File
| @@ -0,0 +1,38 @@ | |||
| .container { | |||
| background-color:gold; | |||
| position: relative; | |||
| } | |||
| .relative { | |||
| height: 150px; | |||
| background-color:hotpink; | |||
| position: relative; | |||
| left: 10px; | |||
| top: -20px; | |||
| } | |||
| .absolute { | |||
| height: 200px; | |||
| background-color: maroon; | |||
| position: absolute; | |||
| top: 10px; | |||
| bottom: 10px; | |||
| left: 10px; | |||
| right: 10px; | |||
| } | |||
| .fixed { | |||
| height: 175px; | |||
| width: 100%; | |||
| background-color: navy; | |||
| position: fixed; | |||
| } | |||
| .sticky { | |||
| height: 50px; | |||
| width: 100%; | |||
| background-color:palevioletred; | |||
| top: 10px; | |||
| position: sticky; | |||
| } | |||
+ 54
- 0
03-positioning/positioning.html
View File
| @@ -0,0 +1,54 @@ | |||
| <!doctype HTML> | |||
| <html> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <title>HTML/CSS - 001: Opdrachts</title> | |||
| <link rel="stylesheet" href="positioning.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. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <div class="sticky"></div> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus nostrum culpa eius molestiae quidem totam qui aliquam nulla illo eum beatae facilis eligendi amet vitae nobis aliquid sint, consequuntur unde.</p> | |||
| </body> | |||
| </html> | |||
Loading…