CSS Positioning with Gbemi

This repository is created to demonstrate and explain the various CSS positioning techniques with practical examples. The examples in this project include static, relative, absolute, fixed, and sticky positioning. These positioning methods are core concepts in CSS and are essential for creating complex and responsive layouts.

Project Structure

The project includes the following files:

1. index.html: Contains the HTML structure showcasing examples of CSS positioning.
2. styles.css: Includes all the CSS styles applied to the HTML file to demonstrate different positioning methods.
3. README.md: Documentation for understanding the purpose and setup of the project.

CSS Positioning Examples

1. Static Positioning:

   • Default positioning of elements.
   • Elements are positioned according to the normal document flow.

2. Relative Positioning:

   • Elements are positioned relative to their normal position in the document flow.
   • Allows adjustments using top, right, bottom, and left properties.

3. Absolute Positioning:

   • Elements are positioned relative to the nearest positioned ancestor (or the viewport if no positioned ancestor exists).
   • Removed from the normal document flow.

4. Fixed Positioning:

   • Elements are positioned relative to the viewport.
   • Remains in place during scrolling.

5. Sticky Positioning:

   • Elements switch between relative and fixed positioning depending on the scroll position.
   • Useful for creating sticky headers or elements that follow the user until a certain scroll point.

How to Use the Repository

1. Clone the repository to your local machine:

   git clone https://github.com/oladetoungee/css-positioning