Relative positioning
The position of the element is calculated relative to its original position.
position:relative;
By default, it refers to the original point of the parent, which is the original point. It is positioned with top, right, bottom and left.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Relative positioning</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 do not change position as the scroll bar is dragged.
position:fixed;
By default, the location of fixed positioning elements is relative to the browser, and is used together with the four attributes of top, bottom, left and right.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Fixed positioning</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 element</div>
<div class="second">Fixed positioning div element</div>
</body>
</html>
Absolute positioning
position:absolute;
By default, the position of absolute positioning is relative to the browser, and it is positioned with top, right, bottom and left.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Absolute positioning</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 attribute sets the stacking order of elements. Elements with a higher stacking order always precede elements with a lower stacking order.
- Element can have a negative z-index attribute value.
- Z-index works only 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;
}
last
If you want to ask whether front-end development is difficult or not, I have to say a sentence often said in the computer field. This sentence is "difficult will not, will not be difficult". For people who are not familiar with the technology in a certain field, they have a sense of mystery because they do not understand it. The sense of mystery will make people feel very difficult, that is, "difficult will not"; When you learn this technology, you know what technology can do and what you can't do. It's just a matter of how long it takes to do it. It's not difficult, so it's "it's not difficult to do it".
I specially organize a set of front-end learning materials for beginners and share them for free, You can get it for free by poking here
It's just a matter of how long it takes to do it. It's not difficult, so it's "it's not difficult".
I specially organize a set of front-end learning materials for beginners and share them for free, You can get it for free by poking here
[external chain picture transferring... (img-MVgJ7xES-1626948319492)]
