Ideas - -Full Stack MERN Web Development
CSS Absolute Positioning
- Absolute Positioning
- Element is completely taken out of the regular flow of the page.
- element is not positioned based on their usual place in the document flow, but based on the position of its ancestor
- Position is determined by: top, left, right, bottom.
- If the absolute positioned element is positioned inside a Static element, then it's position is relative to THE HTML ROOT, which means it could move off the page.
- if you want the position moved, to be applied within it's PARENT element, then you need to use position: relative; on the PARENT element (because absolute positioning is based on the positioning of the parent)
- If the parent is static, you are positioning the element to the html page itself. But if the parent is relative, then you are positioning the element relative to the parent element.
- When to use
- Overlaying elements (eg. badge over avatar)
- Custom Layouts with precise non-flow layouts
- Fixed positioning regardless page content, such as
- a Side Bar
- a Menu Bar
- Important Rules
- Avoid Overuse
- leads to hard to maintain layouts
- Overlapping is possible and is controlled with 'z-index'
- Define positioned ancestor (parent) for consistent placement
- Mind the document flow, watch for overlaps or empty spaces
- Use 'top', 'left', 'right', 'bottom' with 'position'
- Consider responsiveness - may need adjustments for screen sizes
In the page below, all elements are layed out with default "Static" HTML positioning, except for the "DONATE" button, which is placed using "Absolute" positioning.
.donate-button {
position: absolute;
top: 20px;
left: 765px;
}
*as a side note: we had to set the parent element for the "Class Code" to relative so that the button would move relative to it's Parent element (main) - this is done to ensure the proper flow of the Class Code within the confines of the Bodingles structure as a whole. Otherwise, the button would align itself to the static parent, which is the html root itself.
About Us
Learn more about our mission and the impact we're making. Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis adipisci porro hic commodi sunt eum, cumque quasi voluptatem, voluptate necessitatibus beatae provident similique harum aut perspiciatis tempora quibusdam ratione! Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, labore accusantium rerum impedit saepe nam dignissimos, error tempora enim quod nisi omnis tempore atque pariatur asperiores! Obcaecati repellendus aliquam quas.
Our Projects
Discover the various initiatives we are currently working on. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nulla voluptate, dolor, eius atque vel magni aliquid nam animi rem laboriosam nemo minima voluptas quasi ullam fuga facilis distinctio totam consequatur.Learn more about our mission and the impact we're making. Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto debitis adipisci porro hic commodi sunt eum, cumque quasi voluptatem, voluptate necessitatibus beatae provident similique harum aut perspiciatis tempora quibusdam ratione! Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, labore accusantium rerum impedit saepe
Contact Us
Get in touch to learn more about how you can help. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quisquam reiciendis eum fuga totam nemo error, magnam laboriosam quos dolores velit dolorum ullam itaque id consectetur soluta. Illo cupiditate recusandae atque.