Shulou(Shulou.com)06/03 Report--

This article shows you how to use the positioning attribute position to fixed in css. The content is concise and easy to understand, which can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

In html, when a div wants to locate, our first reaction is the position attribute, while the position attribute has absolute,relative and fixed in addition to the default value. When set to fixed, it can be positioned relative to body by setting the values of left, right, top, and bottom.

Code:

The code is as follows:

. my-fiexd {

Position:fixed

Height:40px

Width:40px

Background-color:red

Border:0px

}

But when a div is set to fixed as the scroll bar scrolls (as is the case with many menu), a small phenomenon (bug, so to speak) may occur. The specific code will not go up, so let's talk about the phenomena and solutions.

If a page with a height of 100px has a height of div,my-fixed whose id is my-fixed, and when the scroll bar scrolls to 30px, my-fixed is added fiexd attribute, then the my-fixed is separated from the page, and the corresponding page height is subtracted from 20px, and the page height is 80px. It is possible that the maximum height that the scroll bar can scroll is less than 30px. At this point, my-fixed will keep flickering between adding fixed and not adding fixed, and in the end my-fixed is not added.

The solution is to add a div to the outer layer of the my-fixed and set it to the same height as the my-fixed, so that when the my-fixed is detached, the page height will not decrease, and the flicker can be well avoided.

Ps: the first time to write a blog, the text expression may not be very clear, but the general meaning should be correct. Welcome to ask questions. At the same time, if anyone has the same problem and has a better solution, please let me know.

The above is how to use the positioning attribute position to fixed in css. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.