Table of contents
- I. Introduction
- 2. Positioning composition
- 3. Positioning summary
- 4. Edge Offset
- 5. Show and hide elements
- 6. The Origin of Son's Absolute Father
I. Introduction
CSS positioning is a technique used to control the position and arrangement of elements on a page. CSS has three basic positioning mechanisms: normal flow, floating flow, and positioning flow , where positioning flow includes relative positioning, absolute positioning , and fixed positioning .
- Ordinary flow: elements are sorted in the default top-to-bottom or left-to-right order
- Floating Flow: Added floating elements
- Positioning flow: added positioning elements, including relative positioning, absolute positioning, fixed positioning
Next, the blogger will explain from the three parts of CSS positioning, CSS edge offset, and element display and hiding.
2. Positioning composition
Positioning : Set the box at a certain position, so positioning is also placing the box, and moving the box according to the positioning method
positioning = positioning mode + edge offset
Positioning modes are used to specify how an element is positioned in a document. The edge offset determines the final position of the element
1. Positioning mode
The positioning mode determines the positioning method of the element, which is set through the position property of CSS
1.1, static positioning static
①, grammar definition
Static positioning is the default positioning method of elements, which means no positioning
#静态定位语法
position: static
②. Features
- Static positioning places the position according to the standard flow characteristics, it has no edge offset
- Static positioning is rarely used in layout
1.2, relative positioning relative
①, grammar definition
Relative positioning means that when an element moves its position, it is relative to its original position
#相对定位语法
position: relative
②. Features
- It moves relative to its original position ( the reference point is its original position when moving the position )
- The original position in the standard flow continues to be occupied, and the following boxes still treat it in the standard flow way (the original position will not be lost without taking off the label )
③, code example
<!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 {
//设置盒子相对定位
position: relative;
left: 130px;
top: 140px;
width: 200px;
height: 200px;
background-color: pink;
}
.box2 {
width: 200px;
height: 200px;
background-color: palegreen;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.3, absolute positioning absolute
①, grammar definition
Absolute positioning means that when an element moves its position, it is relative to its ancestor elements
#绝对定位
position: absolute
②. Features
- If there is no ancestor element or the ancestor element is not positioned , the browser will prevail
- If the ancestor element has positioning (relative, absolute, fixed), move the element with the unreferenced point of the nearest positioned ancestor element
- Absolute positioning no longer occupies the original position (off-label)
③, code example
1), there is no ancestor element or the ancestor element is not positioned
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 300px;
bottom: 390px;
width: 200px;
height: 200px;
background-color: pink;
}
.big {
width: 500px;
height: 500px;
background-color: palegreen;
}
</style>
</head>
<body>
<div class="big">
<div class="box1"></div>
</div>
</body>
</html>
2), ancestor elements have positioning
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
position: absolute;
left: 30px;
bottom: 10px;
width: 200px;
height: 200px;
background-color: pink;
}
.big {
width: 500px;
height: 500px;
background-color: palegreen;
}
.bbig{
position: relative;
width: 700px;
height: 700px;
padding: 20px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="bbig">
<div class="big">
<div class="box1"></div>
</div>
</div>
</body>
1.4, fixed positioning fixed
①, grammar definition
- Fixed positioning is where an element stays fixed in the viewport of the browser . The main usage scenario: the position of the element will not change when the browser page is scrolled
#固定定位fixed
position: fixed
②. Features
- Move the element with the browser's visible window as the reference point
a. It has nothing to do with the parent element
b. Does not scroll with the scroll bar - Fixed positioning no longer occupies the previous position
③, code example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.big {
position: fixed;
top: 100px;
right: 40px;
}
</style>
</head>
<body>
<div class="big">
<img src="../02/images/user.png" alt="">
</div>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
<p>好好学习</p>
</body>
④, fixed positioning algorithm
If the box is fixed on the right side of the core
- Let the fixed positioning box left: 50% go to half of the viewable area (version center) of the browser
- Let the fixed positioning box margin-left: Half the width of the core width. Half the position of the core width
1.5, sticky positioning sticky
①, grammar definition
- Sticky positioning can be thought of as a hybrid of relative and fixed positioning
#粘性定位sticky
position: sticky
②. Features
- Move elements using the browser's viewable window as a reference point (fixed positioning feature)
- The sticky point occupies the original position (relative positioning feature)
- One of top, left, right, and bottom must be added to be valid
③, code example
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
height: 3000px;
}
.fixed{
width: 800px;
height: 50px;
background-color: pink;
margin: 100px auto;
position: sticky;
top: 0;
}
</style>
</head>
<body>
<div class="fixed">导航栏</div>
</body>
1.6. Positioning stacking order z-index
①, grammar definition
When using positioned layouts, boxes may overlap. At this time you can usez-indexTo control the order of the boxes
#定位叠放次序
z-index: 数值
②. Features
- The value can be positive integer, negative integer or 0, the default is auto, the larger the value, the higher the box
- If the attribute values are the same, they will be written in order of precedence
- Units cannot be added after the number
- Only positioned boxes have a z-index property
3. Positioning summary
1. Absolutely positioned boxes are centered
A box with absolute positioning absolute cannot be centered horizontally by margin: auto, but it can be centered horizontally and vertically by the following calculation method
- letf: 50%, let the left side of the box move to the horizontal center of the parent element
- margin-left: -100px, let the box move to half of its own width
2. Locate special features
Absolute positioning position: absolute and fixed positioning position: fixed are also similar to floating float
- Add absolute or fixed positioning to inline elements, and you can directly set the height and width
- Add absolute or fixed positioning to block-level elements. If width and height are not given, the default size is the size of the content
3. The off-label box will not trigger the margin collapse
Floating elements, absolute positioning (fixed positioning) elements will not trigger the problem of margin consolidation
4. Absolute positioning (fixed positioning) will completely press the box
- The floating element is different, it will only suppress the standard flow box below it, but it will not suppress the text/picture in the standard flow box below it
- Absolute positioning (fixed positioning) will suppress all the content of the following standard flow
4. Edge Offset
Edge offset is the positioning of the box to move to the final position
5. Show and hide elements
1. display show hide
- display: none
a. Hidden objects - display: block
a. In addition to converting to block-level elements, it also means displaying elements - After the display hides the element, it no longer occupies the original position
2, visibility show hidden
- visibility: visible
a. The element is visible - visibility: hidden
a. element hidden - After the visibility hides the element, it continues to occupy the original position
3, overflow overflow show hidden
- overflow: visible
a. does not cut content and does not add scroll bars - overflow: hidden
a. Do not display the content exceeding the size of the object, and hide the excess part - overflow: scroll
a. Regardless of whether the content exceeds or not, the scroll bar is always displayed - overflow: auto
a. The scroll bar is automatically displayed when the overflow is exceeded, and the scroll bar is not displayed when the overflow is not exceeded
4. Differences among the three
- display shows hidden elements, but does not retain their positions
- visibility shows hidden elements, but retains the original position
- overflow overflow display hidden, but only for partial processing of overflow
6. The Origin of Son's Absolute Father
Son and father: If the child is absolutely positioned (absolute), the parent should use relative positioning (relative)
Relative positioning is often used as the parent of absolute positioning
- The child is absolutely positioned, it will not occupy a position, it can be placed anywhere in the parent box, and will not affect other sibling boxes
- The parent box needs to be positioned to restrict the display of the child box in the parent box
- When the parent box is laid out, it needs to occupy a position. If the parent box is positioned absolutely, the parent box will run to the bottom of the child box, so the parent box can only be positioned relatively
Summary: Because the parent needs to occupy a position, it is relative positioning, and the child box does not need to occupy a position, it is absolute positioning