What are the three positioning methods of css-CSS Tutorial-php.cn

What are the three positioning methods of css

青灯夜游

Release： 2021-11-02 12:00:58

Original

12608 people have browsed it

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

What are the three positioning methods of css

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

Relative positioning

The element's position is calculated relative to its original position.

position:relative;

Copy after login

It refers to the original point of the parent as the original point by default, and is positioned with top, right, bottom, and left.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>相对定位</title>
<style type="text/css">
.king{
margin-top: 30px;
margin-left: 30px;
border: 1px solid silver;
background-color: skyblue;
width: 40%;
}
.king div{
width: 100px;
height: 60px;
margin: 10px;
background-color: snow;
color: black;
border: 1px solid black;
}
.three{
position: relative;
top: 20px;
left: 50px;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

Copy after login

Fixed positioning

Fixed elements will not change position as the scroll bar is dragged.

position:fixed;

Copy after login

By default, the position of the fixed positioning element is relative to the browser, and is used in conjunction with the four attributes of top, bottom, left and right.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>固定定位</title>
<style type="text/css">
.first{
width: 50px;
height: 160px;
border: 1px solid gray;
background-color: #b7f1b7;
}
.second{
position: fixed;
top: 50px;
left: 160px;
width: 150px;
height: 100px;
border: 1px solid silver;
background-color:#b7f1b7;
}
</style>
<body>
<div class="first">div元素</div>
<div class="second">固定定位的div元素</div>
</body>
</html>

Copy after login

Absolute positioning

position:absolute;

Copy after login

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>绝对定位</title>
<style type="text/css">
.king{
padding: 15px;
border: 1px solid silver;
background-color: skyblue;
width: 30%;
}
.king div{
padding: 10px;
}
.one{
background-color: chartreuse;
}
.two{
background-color: cyan;
position: absolute;
top: 20px;
right: 40px;
}
.three{
background-color: darkred;
}
.four{
background-color: dimgrey;
}
</style>
<body>
<div class="king">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
</body>
</html>

Copy after login

z-index

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

Elements can have negative z-index attribute values.
Z-index only works on positioned elements (such as position:absolute;)

Attribute value: auto: By default, the stacking order is equal to the parent element. number: Set 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;
}

Copy after login

(Learning video sharing: css video tutorial)

The above is the detailed content of What are the three positioning methods of css. For more information, please follow other related articles on the PHP Chinese website!