Home >Web Front-end >CSS Tutorial >How to fix the top of div css

How to fix the top of div css

藏色散人
藏色散人Original
2020-12-14 09:07:188605browse

How to implement the fixed top of div css: first add a class name to the div to be fixed, and set the color of the navigation bar; then add the "position" attribute to the div represented by the navigation bar; finally put the navigation The position property of the bar is set to "fixed" to make it fixed.

How to fix the top of div css

The operating environment of this tutorial: windows7 system, css3&&html5 version, thinkpad t480 computer.

css to fix the div at the top:

As shown in the figure, add a class name to the div to be fixed. I will add the class name top to the div. .

How to fix the top of div css

Assume that the width and height of our navigation bar are as shown in the figure, and then set the color of the navigation bar.

How to fix the top of div css

In this way, our navigation bar is created, and then we start to fix the position of the navigation bar div.

How to fix the top of div css

As shown in the figure, add the "position" attribute to the div represented by the navigation bar.

How to fix the top of div css

Then set the position attribute of the navigation bar to "fixed", which means the positioning is fixed.

How to fix the top of div css

Then we set the "top" attribute of the navigation bar to 0, which means that the distance between the navigation bar and the top of the browser is 0. If it is other values, it will be further apart. Some distance.

How to fix the top of div css

In general, just set position:fixed to the div, and then set top to 0 to fix the position. It is very simple, go and practice!

Recommended: "css video tutorial"

The above is the detailed content of How to fix the top of div css. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn