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

This article shows you what the three positioning methods of css are, which are concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The three positioning methods of css are: 1, relative positioning, the position of the element is calculated relative to its original position, syntax "position:relative;"; 2, fixed positioning, syntax "position:fixed;"; 3, absolute positioning, syntax "position:absolute;".

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

Relative positioning

The position of the element is calculated relative to its original position.

Position:relative

It is the default reference to the parent's original point as the original point, with top, right, bottom, left for positioning.

Relative positioning .king {margin-top: 30pxleft: 30pxscape border: 1px solid silver;background-color: skyblue;width: 40%;} .king div {width: 100pxpolitical height: 60pxpolitical margin: 10pxscape backgroundcolor: snow;color: black;border: 1px solid black;} .three {position: relative;top: 20pxleft: 50px;} onetwothreefour

Fixed positioning

The pinned element does not change its position as the scroll bar is dragged.

Position:fixed

By default, the location of the fixed positioning element is relative to the browser, using the four attributes top, bottom, left, and right.

Fixed positioning. First {width: 50pxcontrol height: 160pxscape border: 1px solid gray;background-color: # b7f1b7;} .second {position: fixed;top: 50pxleft: 160pxscape width: 150pxashing height: 100pxSecretaryborder: 1px solid silver;background-color:#b7f1b7;} div element with fixed positioning for the div element

Absolute positioning

Position:absolute

By default, absolute positioning is relative to the browser, with top, right, bottom, left for positioning.

Absolute positioning .king {padding: 15pxbot border: 1px solid silver;background-color: skyblue;width: 30%;} .king div {padding: 10px;} .one {background-color: chartreuse;} .two {background-color: cyan;position: absolute;top: 20pxright: 40px.three {background-color: darkred;} .four {background-color: dimgrey;} onetwothreefour

Z-index

The z-index property sets the stacking order of the elements. Elements with a higher stacking order are always in front of elements with a lower stacking order.

An element can have a negative z-index attribute value.

Z-index only works on positioning elements (for example, position:absolute;)

Attribute value: auto: by default, the stacking order is equal to the parent element. Number: sets the stacking order of elements. Inherit: specifies that the value of the z-index attribute should be inherited from the parent element.

Example: set the z-index of the image:

Img {position:absolute;left:0px;top:0px;z-index:-1;} what are the three positioning methods of css? have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are 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.