CSS fixed div at the top or bottom of the page for a detailed explanation of how

When we are doing the layout of the Web interface, we occasionally generate new requirements, and according to the needs of our own, there will be new problems. If you are an experienced front-end developer, there should be no problem with simple front-end page design. But if you're a beginner, it's going to be a bit difficult. For example, we need to implement a certain div at the top of the page or the bottom of the page, and how to implement it with CSS?

This article will give you a detailed description of how to use CSS style to fix the div on top, or set the div at the bottom of the fixed.

Let's go through the detailed code examples below

<! DOCTYPE html>
The above code is accessed through a browser, such as:



Through we see there are two div blocks that are displayed at the top and bottom of the page. I browsed the mobile scroll bar locally. Two div is still fixed. Here you need to notice an important CSS style attribute, position:fixed, which is the absolutely positioned style attribute. The Position property is the ability to place elements in a static, relative, absolute, or fixed position. What we're using here is the fixed style, which is the stationary position.

So if we want to implement a div that is pinned to the page (relative to the browser window), it does not change with the scroll bar. It is necessary to master the position fixed property and to combine top:0 with bottom:0.