Introduction to the use of positioning attributes position as fixed in CSS

This article mainly introduces about the positioning of the CSS in the position for the fixed use of the introduction, has a certain reference value, now share to everyone, there is a need for friends can refer to

When a Div wants to locate, our first reaction is the position attribute, and the position property in addition to the default value, there are absolute,relative and fixed, there is a good example below, do not know the friend can refer to the next

In HTML, when a p wants to be positioned, our first reaction is the position property, and the Position property, in addition to the default value, is absolute,relative and fixed. When set to fixed, you can position it relative to the body by setting the value of left, right, top, bottom.

Code:

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

However, when a p is set to fixed when the scrollbar is scrolled (pinned, many menu will do), a small phenomenon (which can be said to be a bug) may occur. The specific code will not go on, say the phenomenon and solution it.

If a page with a height of 100px has an ID of my-fixed p,my-fixed height of 20px, scroll bar to 30px, my-fixed is added fiexd attribute, then my-fixed out of the page, The corresponding page height also to subtract 20px, the page height is 80px, perhaps just at this time the scroll bar can scroll the maximum height is less than 30px, this time my-fixed will always be added and do not add fixed between the constant flashing, the last my-fixed has not been added fixed.

The solution is to add a p to the my-fixed outer layer and set the same height as the my-fixed, so that when the my-fixed is detached, the page height will not be reduced, flicker can be very good to avoid

PS: The first time to write a blog, the text may not be very clear, but probably the meaning should be right, welcome to ask questions, at the same time if someone encounters the same problem, and there is a better solution, please also tell me

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!