Home > Article > Web Front-end > What are the three positioning methods of css
What are the three positioning methods of css
- 青灯夜游Original
- 2021-11-02 12:00:5812488browse
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;".
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;
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>Fixed positioning
Fixed elements will not change position as the scroll bar is dragged.
position:fixed;
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>Absolute positioning
position:absolute;
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>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;
}(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!