Floating Elements with CSS
Floating elements used to be a huge deal when I started developing. What I mean by floating is that when you scroll down the page, the element scrolls with you, always maintaining the same position on your screen. The issue back in the day was that the scripts people offered to float elements down the page were choppy, laggy, and generally not pleasing to look at. Yes the content scrolled with you down the page, but it wasn’t a nice experience.
Now, with css, you can create a seamless floating element that doesn’t jump around or fail to keep up with the scrolling. I will state one exception to this is that the iOS 5 has been reported to have issues and it’s slightly laggy.
The key style to set on your elements is the position. Now there are 4 different types of positions.
- Static – This is the default. You don’t have to set this. It will just make the element appear where ever the code is placed in the normal rendering of the page.
- Absolute – This will make the element stay put inside another element. You can use this to overlap elements or position them in ways that the normal positioning based off the line height can’t allow you to do.
- Relative – This is sort of like static, but if you give it a top/bottom/left/right, it will position it based off where it normally would have been if you didn’t give it a position. I also use it when I’m nesting different types of positions inside each other.
- Fixed – This will make the element stay exactly where it is rendered on the user’s screen, allowing the floating feature.