I recently created a landing page for a customer to sign up for car seat cleaning as part of a service partnership with a 3* brand company. During the design consultation and publishing process, I used a lot of CSS and put a few things together. It's not hard to do, but it's hard to remember when you're in the middle of it... So I'm going to blog about some of the CSS code that I've come across and thought, "Oh, yeah, that's it!" (I'm being diligent!).
How to anchor to the bottom of a div regardless of scrolling
Here's a mockup of the Sign Up landing page: first you see the title, then you scroll down to see the details, and if you like what you see and want to sign up, you can click the Sign Up button.
The detail page is quite long, so if we put the Apply button below the detail page, users would have to scroll down a lot, which would be less convenient for users and would naturally lead to fewer applicants. Therefore, we planned to keep the Apply button at the bottom, regardless of the scroll, so that it would be easy to press from any position.
I usually use this a lot for button areas or footer areas on mobile-based pages, and if you want to anchor a div or footer to the bottom, you can easily do that with the position tag. There are other ways to do it, but this is the one I'm most familiar with.
.btn_area {
position: fixed; /* make this part fixed */
bottom: 0; /* no margin at the bottom */
width: 100%; /* Fill the browser with the horizontal size */
}If you have a button that you want to encourage users to click! Try using position: fixed to freeze the area.
English 
Korean