CSS Positioning Float or Position Absolute | Instructions with Video Examples
Do the elements need to interact?
YES:
Start with CSS Float
NO:
Start with CSS Position Absolute
“Do elements need to interact?” is a good question to start with. There is always an opportunity for edge cases, so test for your specific case and limit the amount of elements you are testing against.
Facts:
- CSS Float on an element maintains relative placement in the document flow (video below)
- CSS Position Absolute on an element removes relative placement in the document flow and introduces z-index stacking (video below)
- Both are great. I tend to float for layout and position for design. Floats are responsive by nature and positioning is much more flexible for layers.
- Mapping or sketching a rough design plan will save you time.
Example: Notification Bar Alert
A responsive, self-contained alert notification bar container (parent) with a paragraph (sibling) and a button (sibling).
Requirements:
- must be responsive
- message must be maintain complete visibility
- button must maintain accessibility
In this context, positioning the button absolute introduces stacking issues in a few breakpoints which would require additional work, while float reflows the paragraph next to it inherently.
Recap:
- CSS Float maintains relative placement in the document flow.
- CSS Position Absolute removes relative placement in the document flow and introduces z-index stacking.
- Both are great for specific things.
Worthy Habits of a Top-Tier Creative:
- Separate content, from design, from layout. Layout as building blocks and content holders (think floats and positioning). Content as informational architecture and communication (think accessibility and SEO). Design as visual presentation (think theme styles and interaction). Strive to allow one to change without impacting the others.
- Markup a design and start with a plan.
- Focus on one layer at a time. Don’t try to do all the things, all at once.
If you found this helpful, like > follow > share > comment.
CR Rollyson is a Digital User Experience & Web Manager for a S&P 500 Fintech company and is the COO of Side Role, a marketing team in Charlotte North Carolina partnering with In-house Teams & Agencies, Non-profits, and Start-Ups. Learn more about Side Role here.
