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

Editor to share with you how many types of positioning css3, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

There are four kinds of css3 positioning: 1, relative (relative positioning), offset reference element is the element itself, will not make the element out of the document flow; 2, absolute (absolute positioning), with the nearest positioning element in the parent element as the reference coordinate; 3, fixed (fixed positioning); 4, static (static positioning).

The operating environment of this tutorial: windows7 system, CSS3 version, Dell G3 computer.

There are four different types of css positioning. The position values are: static, relative,absolute,fixed.

1. Relative (relative positioning)

The offset reference element for relative positioning is the element itself, which does not detach the element from the document stream. The space occupied by the initial position of the element is retained. Relative positioning elements are often used as parents of absolute positioning elements. And positioning elements are often hierarchical with z-index attributes.

Code example:

Document.rel {width: 200px; height:200px; background: red; position: relative; top:200px; left: 200px;} relative positioning

Ashton sent Stephen Ashton Fatty. Stephen Ashton sends Stephen Astefen. Stephen Ashton sent Stephen Ashton

Effect picture:

Although the rel element is offset, the text does not fill its original position, you can see that the relative positioning element is not out of the document flow, the original position will still be retained.

2. Absolute (absolute positioning)

The absolute positioning element takes the nearest positioning element in the parent element as the reference coordinate. If no positioning is used in the parent element of the absolute positioning element, then the reference object of the absolute positioning element is html, and the element will deviate from the document stream. It's like being deleted from the document stream. And positioning elements are often hierarchical with z-index attributes.

Code example:

Document.abs {width: 200pxscape background: red;position: absolute;top: 200pxleft: 200px } absolutely locate Ashton and send Stephen Astefen Ashton sent Stephen Ashton Fatty. Stephen Ashton, Stephen Ashton.

Effect picture:

I would like to refute the rumor here! If the parent element of the absolute positioning element does not use positioning, then who is the reference object of this absolute positioning element? some people say it is body, some people will say it is document, but in fact, it is not. Read the introduction on MDN, take initial containing block as the reference, its size is the same as the viewport, but is not produced by Viewport, but by the root element.

Code example:

* {margin:0px; padding:0px;} body {height:1500px;} div {width:100px; height:100px; background:green; position:absolute; bottom:0px;}

Example effect picture:

If the reference object is body or document, the p element must be at the bottom of the page. Notice that there is a scroll bar here, and the element is only at the bottom of the viewport.

3. Fixed (fixed positioning)

The reference coordinate of the displacement is a visual window, and the elements using fixed are detached from the document stream. And positioning elements are often hierarchical with z-index attributes.

Example code:

Document.fix {width:200px;height: 200pxleft background: red;position: fixed;top: 200pxleft: 200px } fixed positioning of Ashton hair Stephen Astefen Ashton sent Stephen Ashton Fatty. Stephen Ashton sent Stephen Ashton

Example effect picture:

Fixed fixed positioning and absolute absolute positioning are similar, they can make elements produce displacement; if so far we have not seen the difference between fixed positioning and absolute positioning, then we can add more text in the text is the browser to generate scroll bar, drag the scroll bar to see the difference between the two positioning methods, fixed positioning elements like its name, can be fixed in a certain position. The absolute positioning will move the position as the scroll bar scrolls.

4. Static (static positioning)

Default value, element box is generated normally, top left bottom right these offset attributes will not affect the normal display of its static positioning.

The above is all the contents of the article "how many positioning types are there in css3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.