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

Home

Web Front-end

CSS Tutorial

What are the three positioning methods of css

青灯夜游

Nov 02, 2021 pm 12:00 PM

css

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;

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn