Statement: The following content is a summary of personal study, the original intention is to facilitate their own study and review records. If there are any errors, please correct me!
Positioning = positioning mode + edge offset.
- Need to master the positioning mode
-relative positioning (relative)
-absolute positioning (absolute)-fixed
positioning (fixed) - Edge offset: top,bottom,left,right
Relative positioning
Element relative to its original position in the normal stream to be, and elements without departing from the standard flow position :
Absolute positioning
The element is determined by the nearest parent element with positioning (if the parent element is not positioned, then the browser), and the element position is out of the standard flow
Summary of relative positioning and absolute positioning
When the child element uses absolute positioning, the parent element is best to use relative positioning, that is, the child is absolutely the parent . The reason is: if the parent element uses absolute positioning, the parent element will leave the document flow, and the position of other boxes will change (run to the original position of the parent element); if the parent element uses relative positioning, the parent element remains Position does not affect the position of other elements on the page.
Case study:
implementation code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 1000px;
height: 82px;
background-color: pink;
margin:0 auto;
position: relative;
/*相对定位元素不脱离文档流，占据位置，所以不会影响box2的位置显示*/
}
.arrow-l {
/*绝对定位元素相对于最近定位的父级元素定，脱离文档流*/
position: absolute;
top: 23px;
left: 0px;
}
.arrow-r {
position: absolute;
right: 0px;
top: 23px;
}
.box2 {
/*无定位，正常文档流显示*/
width: 1000px;
height: 82px;
background-color: #c1cbd7;
margin:0 auto;
}
</style>
</head>
<body>
<div class="box1">
<img src="imgs/banner.png" alt="广告栏" width="1000px">
<img src="imgs/arrow-l.png" alt="左箭头" width="40px" class="arrow-l">
<img src="imgs/arrow-r.png" alt="右箭头" width="40px" class="arrow-r">
</div>
<div class="box2"></div>
</body>
</html>
Fixed positioning
The element is completely separated from the document flow, positioned relative to the browser window , and does not move with the scroll bar