Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kawodyaarachchige/css-position
Welcome to the css-positions Tutorial repository!
https://github.com/kawodyaarachchige/css-position
Last synced: 8 days ago
JSON representation
Welcome to the css-positions Tutorial repository!
- Host: GitHub
- URL: https://github.com/kawodyaarachchige/css-position
- Owner: kawodyaarachchige
- License: mit
- Created: 2024-05-07T17:45:44.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-05-07T17:58:57.000Z (8 months ago)
- Last Synced: 2024-11-09T06:06:39.631Z (2 months ago)
- Language: HTML
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS position Property
CSS positions allow you to precisely control the placement of HTML elements within a webpage. There are five main position values in CSS: static, relative, absolute, fixed, and sticky. Here's an explanation of each:
### Static:
- This is the default position value for all HTML elements.
- Elements with a static position flow naturally within the document layout according to the normal flow of the HTML.
- Static positioned elements are not affected by the top, bottom, left, and right properties.
### Relative:
- Relative positioning allows you to move an element relative to its normal position in the document flow.
- When you apply relative positioning to an element and then use the top, bottom, left, or right properties, the element will be moved from its original position without affecting the layout of other elements.
- Other elements on the page will still occupy the original space the element would have taken up.
### Absolute:
- Absolute positioning removes the element from the normal document flow and positions it relative to its containing element or the nearest positioned ancestor.
- This means that absolutely positioned elements are taken out of the document flow, and other elements will not adjust to fill the space they leave.
- Absolute positioning is often used for elements like tooltips, dropdown menus, or elements that need to be precisely positioned within a parent container.
### Fixed:
- Fixed positioning is similar to absolute positioning, but the element is fixed relative to the viewport, meaning it stays in the same place even when the page is scrolled.
- Fixed elements are often used for headers, footers, or navigation bars that should remain visible as the user scrolls through the page.
### Sticky:
- Sticky positioning is a hybrid of relative and fixed positioning.
- A sticky positioned element behaves like a relatively positioned element until it reaches a specified point (defined by the top, right, bottom, or left properties), at which point it becomes fixed.
- Sticky positioning is commonly used for headers that stick to the top of the viewport when scrolling down a page.
HAPPY COADING 🌝
Tharu Arachchige.....🦇❤️