Several commonly used positioning methods in CSS, directly on dry goods!
What is positioning?
Elements can be positioned using the top, bottom, left and right properties. However, these properties will not work unless first set
position property. They also work differently, depending on the targeting method.
The position attribute specifies the positioning type of the element, which is used to specify how an element is positioned in the document.
Attributes:
- relative relative positioning
- absolute absolute positioning
- fixed fixed positioning
- sticky sticky positioning
- Elements whose attribute values are the above four are called positioning elements
- static The default attribute value is not a positioning element when the attribute value is static
In positioning, we determine the position of the positioning element through the four attributes of top right bottom left.
Relative positioning: position : relative
In relative positioning, the positioning element is positioned according to its original position. Relative positioning will not break away from the document flow, and will not affect other elements in the document flow. The offset is based on the given value, and the value can be negative;
- top The bigger the value, the lower the top The difference between the top and the original position
- The bigger the value of bottom, the higher the difference between the bottom and the original position
- The greater the value of left, the more to the right the difference between the left and the original position
- The bigger the value of ight, the more left, right and original position difference
Features Occupy the original position, occupy the position in the document flow.
Absolute positioning: position:absolute
In absolute positioning, the positioning basis is the parent of the positioning element, until the body element is found, the absolutely positioned element will be separated from the document flow, and the width and height can be set in the line, and the block element does not occupy a single line, and the width and height are expanded by the content;
- top The larger the value, the lower the difference between the top and the top of the positioning parent
- bottom The bigger the value, the higher the difference between the bottom and the bottom of the positioning parent
- The greater the value of left, the more right it is. The difference between the left and the left of the positioning parent
- right The larger the value, the more left the difference between the right and the right of the positioning parent
Features Out of document flow
Fixed positioning: position: fixed
Positioning according to the position and size of the browser window, the position of the element will not change when the screen content scrolls, and the fixedly positioned element will move out of the document flow;
- top Position according to the top edge of the window
- bottom Position according to the bottom of the window
- left position according to the left side of the window
- right Position according to the right side of the window
Sticky positioning: position:sticky
Sticky positioning can be seen as a mixture of relative positioning and fixed positioning. The element is relatively positioned before crossing the threshold, and fixed after that;
.stickyElement{
width: 100%;
height: 30px;
background-color: #FFFFAA;
position: sticky;
top: 10px;
}
feature:
Before the element scrolls to less than 10px from the top of the window, the element is relatively positioned, and then the element will be fixed at the position where the top is 10px until the window is rolled back.
Sticky positioning is a newly added CSS3 content, which may not be supported by old browsers.
extension:
z-index z-axis
The order in which elements are displayed
The value is a positive integer
case:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body{
margin: 0;
}
.relativeElement{
position:relative;
width: 300px;
height: 300px;
background-color: #FFAAAA;
z-index: 2;
}
.normalElement{
width: 300px;
height: 900px;
background-color: #AAFFAA;
}
.absoluteElement{
width: 100px;
height: 100px;
background-color: #AAAAFF;
position: absolute;
top: 20px;
left: 20px;
z-index: 10;
}
.fixedElement{
width: 100%;
height: 30px;
background-color: #FFFFAA;
position: fixed;
left: 0;
top: 0;
z-index: 99;
}
.stickyElement{
width: 100%;
height: 30px;
background-color: #FFFFAA;
position: sticky;
top: 10px;
}
</style>
</head>
<body>
<div class="relativeElement">
<span class="absoluteElement"></span>
<div style="width:100px;height:100px;background-color:#AAFFAA;z-index: 9;position: absolute;"></div>
</div>
<div class="stickyElement">粘性导航条</div>
<div class="normalElement">
<!-- <div class="absoluteElement"></div> -->
</div>
<div class="normalElement" style="background-color: #AAFFFF"></div>
<!-- <div class="fixedElement">导航条——吸顶导航</div> -->
</body>
</html>Hurry up, like, collect and run it!