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

Editor to share with you the example analysis of positioning float, static, relative, absolute and fixed in CSS. I hope you will get something after reading this article. Let's discuss it together.

Html objects are arranged from top to bottom and from left to right in the way of document flow.

Static: elements are positioned by default, following basic html layout rules

Relative: relative positioning, relative to which object? Relative to the position of the element itself.

Div {width:300px; height:200px;} .div5 {position:relative; left:20px;// offset below 20px top:30px;// offset 20px to the right

The entity box in the figure is the original position of the div5, and the dashed frame 6 is the position after relative positioning, but the element itself occupies the position of the entity box in the document flow, and the next element div7 is based on the entity box as a reference.

Absolute: absolute positioning, away from the document stream. Absolute positioning also has a reference target! If the parent element is positioned in relative/absolute/fixed, then the parent element is used as the reference target, otherwise the body is used as the reference target

Fixed: absolute positioning, with the browser window as the reference target.

In addition, the browser window html is generally about 9px larger than body, which can be eliminated by setting the outer margin of body.

In addition, the parameter z-index will only take effect when the positioning methods are relative or absolute.

After reading this article, I believe you have some understanding of "sample Analysis of locating float, static, relative, absolute and fixed in CSS". If you want to know more about it, please follow the industry information channel and thank you for your reading!

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.