Introduction to the use of the positioning attribute position as fixed in css

This article mainly introduces the use of the positioning attribute position as fixed in CSS. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

When a div wants to When positioning, our first reaction is the position attribute. In addition to the default value, the position attribute also includes absolute, relative and fixed. There is a good example below. Friends who don’t understand can refer to it

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

Code:

.my-fiexd{ 
position:fixed; 
height:40px; 
width:40px; 
background-color:red; 
border:0px; 
}

But when a p is set to fixed as the scroll bar scrolls (top, many menus will do this), a small phenomenon may occur (it can be said that bug). I won’t go into the specific code, just talk about the phenomenon and solutions.

If a page with a height of 100px has a p with an id of my-fixed, the height of my-fixed is 20px, and when the scroll bar scrolls to 30px, my-fixed is added with the fiexd attribute, then at this time my -fixed is separated from the page, and the corresponding page height is also reduced by 20px. The page height is 80px. It may be that the maximum height that the scroll bar can scroll is less than 30px at this time. At this time, my-fixed will keep adding and It keeps flickering between not adding fixed, and finally my-fixed is not fixed.

The solution is to add a p to the outer layer of my-fixed and set the same height as my-fixed, so that when my-fixed is detached, the page height will not be reduced and the flickering phenomenon will be eliminated. Good avoidance

ps: This is my first time writing a blog. The expression may not be very clear, but the general meaning should be correct. Questions are welcome. At the same time, if anyone encounters the same problem and has a better solution Please tell me the solution

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Vertical secondary navigation implemented in css3

How to use the position:fixed attribute to center a DIV

The above is the detailed content of Introduction to the use of the positioning attribute position as fixed in css. For more information, please follow other related articles on the PHP Chinese website!