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

Today, the editor will share with you the relevant knowledge points about how to use positioning in CSS. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Introduction to positioning in CSS

The position attribute expresses the meaning of position in English words and plays a major role in setting the location of elements in CSS.

There are three kinds of positioning in CSS as follows:

Property value describes the fixed setting fixed positioning. Relative sets relative positioning. Absolute sets absolute positioning. Fixed positioning practice

Let's take a look at what the code structure looks like before we practice fixed positioning.

Code block

Locate .box {width: 100px; height: 100px; background-color: red; margin: 0; padding: 0;} div {width: 200px; height: 200px; background-color:springgreen; margin: 0; padding: 0;}

Result diagram

Now the author sets the H2 element to fixed positioning to see what is different from the above structural practice, and then we are analyzing some of the characteristics of fixed positioning.

Code block

Locate .box {position:fixed; width: 100px; height: 100px; background-color: red; margin: 0; padding: 0;} div {width: 200px; height: 200px; background-color:springgreen; margin: 0; padding: 0;}

Result diagram

The characteristics of fixed positioning are analyzed as follows:

Fixed positioning, which is set relative to the browser window, regardless of whether the page is scrolled, the fixed positioning of the element position will not be affected.

Fixed positioning element characteristics: it has deviated from the standard document stream.

Fixed positioning element characteristics: its level is higher than the standard document stream elements, so we set the H2 tag fixed positioning will be embossed to the div tag.

Features of fixed positioning elements: the H2 tag is above the div tag, so fixed positioning elements no longer take up any space.

Relative positioning practice

Let's take a look at what the code structure looks like before we practice relative positioning.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue;} .div3 {background-color: springgreen;}

Result diagram

Now the author sets the class attribute value to .div2 element to relative positioning to see how it differs from the above structural practice, and then we are analyzing some of the characteristics of relative positioning.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue; position: relative;} .div3 {background-color: springgreen;}

Result diagram

Note: if we do not set the coordinate position for the relative positioning, it will not move at all.

The author sets the positioning coordinate for the div2 element with the value of the class attribute.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue; position: relative; left: 50px; top: 50px } .div3 {background-color: springgreen;}

Result diagram

The characteristics of relative positioning are analyzed as follows:

The relative positioning of the element does not deviate from the standard document stream.

If the relative positioning element does not set the coordinates, it will be in place.

The relative positioning element sets the coordinate position, and it starts to calculate the moving position based on the original position.

Relatively positioned elements it is higher than the element level of the standard document stream and overrides the elements in the standard document stream.

Relative positioning of the element it can be set to a negative number.

Absolute positioning practice

Let's take a look at what the code structure looks like before we practice absolute positioning.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue;} .div3 {background-color: springgreen;}

Result diagram

Now the author sets the class attribute value to .div2 element to absolute positioning to see how it differs from the above structural practice, and then we are analyzing some of the characteristics of absolute positioning.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue; position:absolute;} .div3 {background-color: springgreen;}

Result diagram

Note: absolute positioning has deviated from the standard document stream.

The author sets the positioning coordinates for the class attribute value for the div2 element, and in order to give the reader an intuitive impression, I set the center alignment for the outermost div element.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange; margin: 0px auto;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue; position:absolute; left:0px } .div3 {background-color: springgreen;}

Result diagram

Note: why does the absolute positioning element appear on the left edge of the browser? absolute positioning movement principle: absolute positioning element it will find whether the parent element has a positioning, if there is a positioning, it will locate according to the parent element, if the parent element does not set positioning, it will look for whether the parent element has a positioning, and so on until the body element stops, because the body element is the location of the browser Having said so much, the author gives the new scholar an intuitive impression, so let's see the real trick in practice.

Code block

Locate .box {width: 400px; height: 300px; border: 1px solid darkorange; margin: 0px auto; position: relative;} .box div {width: 100px; height: 100px;} .div1 {background-color: red;} .div2 {background-color: slateblue; position:absolute; right:0px } .div3 {background-color: springgreen;}

Result diagram

Note: now the author has changed the absolute positioning coordinates to the right positioning, and the parent element has set a relative positioning, so there is not much practice here, if the parent element of the positioning parent element is the grandfather's element, both the parent element and the grandfather element are positioned, and the element will be positioned according to the parent element rather than the grandfather element.

The characteristics of absolute positioning are analyzed as follows:

Absolute positioning element it has deviated from the standard document stream.

Absolute positioning element it overrides the elements of the standard document stream.

Absolute positioning element it no longer takes up any space.

Absolute positioning element it depends on whether there is positioning between the ancestor elements of the parent element, if there is a location set according to the nearest element, if it is not positioned according to the body element.

The parent element of absolute positioning element can be any positioning including absolute positioning, the author suggests using relative positioning, general relative positioning is used in conjunction with absolute positioning.

These are all the contents of this article entitled "how to use location in CSS". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.