Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
fixed position

4 Articles
{
,

}
Direct link to the article Going From Solid to Knockout Text on Scroll
clip fixed position typography

Going From Solid to Knockout Text on Scroll

Here’s a fun CSS trick to show your friends: a large title that switches from a solid color to knockout text as the background image behind it scrolls into place. And we can do it using plain ol’ HTML and …

Avatar of Blake Lundquist
Blake Lundquist on Feb 3, 2021
Direct link to the article On fixed elements and backgrounds
fixed position

On fixed elements and backgrounds

Direct Link

After just playing with apsect-ratio and being pleasantly surprised at how intuitive it is, here’s an example of CSS acting unintuitively:

If you have a fixed element on your page, which means it doesn’t move when you scroll, you

…
Avatar of Chris Coyier
Shared by Chris Coyier on Jun 3, 2020 (Updated on Jun 4, 2020)
Direct link to the article Sticky as a Local Fixed?
fixed position modal scrolling sticky

Sticky as a Local Fixed?

You know how position: relative creates a new context for absolute positioning within an element? Well, position: sticky is a locally scoped version of position: fixed. Let's take a look at how that works using a modal with a sticky close button as an example.
Avatar of Chris Coyier
Chris Coyier on Mar 26, 2018
background-attachment fixed position panels sliding

Use Cases for Fixed Backgrounds in CSS

File this into a category of personal “CSS Ah-Ha Moments“.

The background-attachment property has never seemed all that useful to me. I have always looked at it as some sort of old school design trick from the GeoCities …

Avatar of Geoff Graham
Geoff Graham on Aug 25, 2016 (Updated on Aug 26, 2016)
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top