Positioning (position)
“1. Location details”
The box is “fixed” on a “bit” that floats freely on top of other boxes (both standard flow and float).
Therefore, we should have three layout mechanisms in order 👇👇
The standard flow is at the bottom
Floating box in the middle layer
Positioned box on top (sky)
Positioning is used for layout, and it has two parts: positioning = positioning mode + edge offset
In CSS, the “edge offset” of an element is defined by the top, bottom, left, and right attributes :(orientation noun)
| Edge offset property | The sample | describe |
|---|---|---|
top |
top: 80px |
“On top”An offset that defines an element relative to its parent“Distance from the top edge”. |
bottom |
bottom: 80px |
“The bottom”An offset that defines an element relative to its parent“Distance from the bottom edge”. |
left |
left: 80px |
“The left”An offset that defines an element relative to its parent“The distance to the left”. |
right |
right: 80px |
“Right”An offset that defines an element relative to its parent“Distance from the right line” |
2. Position
In the CSS, the “position mode” of an element is defined using the position attribute. The syntax is as follows:
Selector {position: property value; }Copy the code| value | The semantic | |
|---|---|---|
static |
“Static”positioning | |
relative |
“Relative”positioning | Position relative to the location of its original document flow |
absolute |
“Absolute”positioning | Position relative to its last positioned parent element |
fixed |
“Fixed”positioning | Position relative to the browser window |
“3. Static Positioning”
- Static positioning is the default positioning of elements. It is equivalent to none in border and is not used when positioning.
- Static positioning Position according to standard flow characteristics. It has no edge offset.
- Static positioning is rarely used in layout
4. How do you do?
- Relative positioning is the position of an element relative to its original position in the standard flow.
Relative to their original position in the standard flowTo move the- In the original
The area of the standard flow continues to occupyThe box behind still treats it as a standard stream.
5. Absolute
Absolute positioning is the positioning of an element according to its most recently positioned (absolute, fixed, or relative) parent element (ancestor).
Completely off scale -- completely out of position;- If the parent element is not located, the
Browser Based Positioning(Document Document). - The parent element has positioning.
Positioning formula -- the child must father phase
Child parent phase
This “son must father” is too important, is we learn the formula of positioning, remember all the time. This sentence means that if the child is absolute, the parent should use relative positioning.
First, absolute positioning refers to positioning an element according to the parent element (ancestor) that has been most recently positioned absolute, fixed, or relative.
That is to say, the child is absolute positioning, as long as the father is positioning (no matter the father is absolute positioning or relative positioning, or even fixed positioning can be), that is to say, the child absolutely father absolutely, the child absolutely father phase is correct.
However, in the layout of our web page, the most commonly said child completely father phase is how to come? Please see the picture below:
Therefore, we can draw the following conclusions:
Because children are absolutely positioned and do not take up space, they can be placed anywhere in the parent box.
When the parent box is laid out, it needs to occupy the position, so the parent can only be positioned relative.
This is the origin of the son to the father.
6. Fixed position
Fixed positioning is a special form of absolute positioning.
-
Completely off scale – completely out of position;
-
View only the browser’s view window – the browser’s view window + the edge offset property sets the element’s position
-
- It has nothing to do with the parent element; Used alone
- Does not scroll with the scroll bar
Extension of position
The absolutely positioned box is centered
Margin: auto Horizontal center margin: auto horizontal center
- Left: 50%: moves the left side of the box to the horizontal center of the parent element;
- margin-left: -100px; Move the box half its width to the left.
- Similarly, vertical center.
Stack sequence (Z-index)
When using a “positioning” layout, there may be “cases where boxes overlap.”
If the box is positioned, by default, “the latecomer comes first”, and the box behind will overwhelm the box in front.
Apply the Z-Index cascading rank property to “adjust the stack order of boxes”. As shown below:
The z-index has the following features:
- Attribute values: positive integer, negative integer, or 0, default is 0,
The higher the number, the more the box leans up; - If the values of the attributes are the same, they are written in order,
From behind; - You can’t add units after numbers
- Z-index can only be used for relative, absolute, and fixed positioned elements. Other standard stream, float, and static positions are not valid.
Position changes the display property
As mentioned earlier, display is the display mode. You can change the display mode by:
- Inline-block can be converted to an inline block
- Can be converted to inline blocks by default with floating floats (
Similar, not exactly the same, because float is off target) - Absolute positioning and fixed positioning are also similar to floating, with default conversion features
Convert to inline blocks.
So, a box in a row, if you add “float”, “fixed position” and “absolute position”, without conversion, the box can be directly set width and height, etc.
Position summary
| Positioning mode | Whether off-label occupies the position | Moving position reference | Pattern conversion (inline blocks) | usage |
|---|---|---|---|---|
| Static static | No deviation, normal mode | Normal mode | Can’t | Almost no |
| Relative positioning | Not off – scale, occupy the position | Moving relative to itself | Can’t | Basically alone |
| Absolute positioning | Completely off scale, no position occupied | Move position relative to location parent | can | Use with the location parent element |
| Fixed position | Completely off scale, no position occupied | Move position relative to the browser | can | Used alone, no parent is required |
Note:
Boundary migrationThe needs andPositioning modeCombined use,Invalid if used alone;topå’ŒbottomDon’t use both at the same time;leftå’ŒrightDon’t use both.
Show and hide elements
There are three common display and hidden words in CSS that we need to distinguish: display visibility and overflow.
Their main goal is to make an element disappear from the page, but not be removed from the documented source code. The most common is the website ads, when we click on something like close and disappear, but we refresh the page, they will appear again and play hide and seek with you!!
The display shows
Display Sets or retrieves whether and how objects are displayed.
Display: None hides objects. The opposite is display:block, which converts to block level elements and also displays elements.
Features: No longer retains position after hiding.
The visibility of visibility
Sets or retrieves whether an object is displayed.
Visible: The object is visible
Hidden: The object is hidden
Features: After hiding, continue to retain the original position. (Suspension with pay)
Overflow spill
Retrieves or sets how to manage the content of an object when its content exceeds its specified height and width.
Visible: Does not cut content or add scroll bars.
Auto: displays the scroll bar automatically when the number exceeds the limit
Hidden: Do not display content that exceeds the size of the object
Scroll: always display the scroll bar regardless of whether the content is exceeded