Conteúdo do Curso
Advanced CSS Techniques
Advanced CSS Techniques
1. Getting Started with Advanced CSS
2. Mastering CSS Positioning
Understanding CSS PositioningRelative Positioning ExplainedChallenge: Apply Relative PositioningAbsolute Positioning in CSSChallenge: Implement Absolute PositioningFixed Positioning for Sticky UI ElementsChallenge: Work with Fixed PositioningSticky Positioning for Dynamic LayoutsChallenge: Master Sticky PositioningManaging the Stacking Order of ElementsChallenge: Control Z-Index and Overlapping ElementHandling Content Overflow in CSS
5. Transforming Elements with CSS
7. CSS Preprocessors and Sass
Challenge: Work with Fixed Positioning
Task
Create a website navigation bar that remains fixed at the top of the webpage for users to access at all times. Steps:
Apply
fixed
positioning to the navigation list.Choose one property for horizontal displacement (
left
orright
).Choose one property for vertical displacement (
top
orbottom
).Test the functionality by clicking on different links and ensuring that the page scrolls while keeping the navigation bar visible.
index.html
index.css
Set the
top
property to0
to keep the navigation at the top of the web page.For horizontal positioning, you can use either
left: 0;
to align it with the viewport's left edge orright: 0;
to align it with the right edge.
index.html
index.css
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 2. Capítulo 7