Article Directory
1. Positioning Introduction
Positioning has two functions:
1. It can solve the stacking problem between boxes (after positioning, the element has the highest level and can be stacked on top of other boxes)
2. It can keep the box fixed at a certain position on the screen
属性名:position
Common property values:
| Targeting | attribute value |
|---|---|
| static positioning | static |
| relative positioning | relative |
| absolute positioning | absolute |
| fixed positioning | fixed |
ps: The first of these four values is no positioning, adding or not adding is the same effect.
Setting the position is just the way to set the positioning. In addition to the positioning method, you also need to set the offset value
The offset value setting is divided into two directions (horizontal and vertical directions)
| direction | attribute name | attribute value | meaning |
|---|---|---|---|
| level | left | number+px | distance from left |
| level | right | number+px | distance to the right |
| vertical | top | number+px | distance from top |
| vertical | bottom | number+px | distance from bottom |
ps: The attribute value here can be written as a percentage
2. Positioning method
As mentioned earlier, there are four positioning methods, static positioning, relative positioning, absolute positioning and fixed positioning. Static positioning
means no positioning, and the focus is on the other three positioning methods
2.1 Relative positioning
Relative positioning is to move relative to its original position
position: relative;
Effect demonstration:
This is the effect before positioning is not set:
After setting the positioning:
You can see that the div is offset by 50px to the right and bottom on the basis of the original position. Pay attention to the offset direction and the direction in which the box moves.
Here you can see that the div has been pressed on the p tag, and it has been unmarked. But the p tag has not changed. It means that the relatively positioned element still occupies the original position . It is different from floating. If you set floating, the p tag will be Go to the top to the top. This is also the impact that other elements may be affected by using floats.
Open the developer tools and have a look:
relative positioning will not change the original characteristics of the label, such as the div here. Block-level elements occupy a single line. After positioning, it still occupies a single line
Here are some issues to be aware of:
- After setting the positioning method, don't forget to set the offset. Otherwise, it will have no effect
- When setting the offset, you only need to set one in the horizontal and vertical directions . But if you write them all, then the horizontal direction is dominated by left (left), and the vertical direction is dominated by top (top).
2.2 Absolute positioning
position: absolute;
Absolute positioning: positioning relative to the non-statically positioned parent element.
Absolute positioning will first find the positioned parent element. If there is such a parent element, it will use the parent element as a reference for positioning. If there is a parent element but no positioning, Positioning will be done using the browser window as a reference.
Code demo:
It is still the same code as before, the effect before absolute positioning is not set.
The effect after absolute positioning is set:
You can see that after setting absolute positioning, the p tag runs to the top. At this time, the div has been unlabeled (out of the standard document ).
Open the developer tool:
we can see that the div after setting absolute positioning is no longer a block-level element. It has become an inline block element.
Before setting the offset, you can see that there is still a gap between the div and the browser.
If you add a left offset of 0 to it, you can see that the div has been pasted with the browser at this time
. When talking about absolute positioning, I mentioned that if there is a parent element, but the parent element has not been positioned, it will be positioned with reference to the browser window. In the above case,
div is body, but body has not been positioned, so div It is based on the browser as a reference for positioning.
2.2.1 Child paternity
I just mentioned that absolute positioning can be positioned with reference to the parent element. There are two conditions. The parent element sets relative positioning, and the child element sets absolute positioning. This is called the parent element of the child. The
pink div box is the parent element of the blue div box, and the pink div is set for relative positioning, while the blue div is set for absolute positioning. At this time, the blue The color div is positioned with reference to the pink div.
Note: The way to find the parent element with absolute positioning is to find the nearest one. In the development process, an element may have many parent elements. If you want to set absolute positioning for it, you need to search out one by one with its nearest parent element until you find it or browse device as a reference
2.3 Fixed positioning
position: fixed;
Fixed positioning is positioning and moving relative to the browser. Simply put, the element is always located at a certain position in the browser, such as some navigation bars, which use fixed positioning. Code demonstration: Before setting fixed positioning and after adding
fixed
positioning
:
Yes It can be seen that the div has been unlabeled and no longer occupies the original position. The reference position of the fixed positioning is the browser, and the label using the fixed positioning has the characteristics of an inline block element.
3. Hierarchical relationship of elements
Positioning can make elements unlabeled, and floating can also make elements unlabeled. So what is the hierarchical relationship between them?
Directly give the conclusion:定位>浮动>标准流
Positioning can also be divided into relative positioning, absolute positioning and fixed positioning. If the positioning makes the standard flow off-label, then the hierarchical relationship between them is:
- Relative positioning, absolute positioning and fixed positioning have the same default level. The position that needs to be written, the lower level relationship is higher, and the element written above will be overwritten.
4. Summary
Positioning is divided into static positioning, relative positioning, absolute positioning, and fixed positioning. It is necessary to clearly understand the characteristics of each positioning, the sub-parents in absolute positioning, and the hierarchical relationship between elements.
Thank you for watching! I hope this article can help you!
Column: "Web Front-End Development" is constantly being updated, welcome to subscribe!
"Wish to encourage you and work together!"
