Delve into the properties and attributes of position in CSS

First, the concept of position

As one of the indispensable elements of layout, it is necessary to delve into its properties and some points of attention.

Definition: The positioning type of the specified element.

Position Properties:

Properties	Description	Common Sex
Absolute	Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor.	★
Relative	Creates a relative positioned element, positioned relative to its normal position in the document flow.	★
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window.	★☆
Static	The default value. No positioning, element appears in normal stream (ignore top, bottom, left, right or Z-index declaration)	☆

The main concepts of position can be learned from the table, and there are several points to note:

Second, the position attribute of some note point 1. The positioning problem of absolute

The location that absolute locates is the parent element that has the most recent position property and the property value is not static. The child element is positioned by default in the upper-left corner of the parent element.

If the child element only sets the Position:absolute, the elements such as left and top are not set. It has nothing to do with the corresponding padding.

For example, if the child element is set to bottom:0, if the parent element exists padding:20px, then padding-bottom:20px; it will fail, but padding-left:20px; it still works. Like what:

//cssdiv{    width:200px;    height:200px;}.fatherDiv{    background-color:#12B7F5;    position:relative;    padding:20px;    margin-top:20px;}.childDiv{    width:100px;    height:100px;    background-color:#F9b041;    position:absolute;    bottom:0px;}//html<div class="fatherDiv">    <div class="childDiv"></div></div>

Of course if you set the left and set the bottom. Then any setting of the parent element's padding will not have any effect on the child element.

It is important to note that the margin will also affect the child element, as it directly affects the parent.

2. Relative positioning problems

The following examples are based on the following style

//cssdiv{    width:200px;    height:200px;}.brotherDiv{    background-color:#12B7F5;}.brotherDiv1{    background-color:#F9b041;}//html<div class="brotherDiv"></div><div class="brotherDiv1"></div>

I. Two div blocks (block) elements

Both left and top .... will not affect each other. Because even if the element position changes, it does not affect the layout because it occupies space in the document flow.

.brotherDiv{    position:relative;    top:40px;}.brotherDiv1{    position: relative;}

You can also set the level of the display through Z-index. For example, if you set z-index:1 for Brotherdiv, the blue block will overwrite yellow (Z-index defaults to 0)

Ii. two div for inline-block level (Inline-block) elements

In addition to having the first feature, there is one more characteristic:
Both margin and padding affect the peer element

.brotherDiv{    position:relative;    display: inline-block;    margin-top:40px;}.brotherDiv1{    background-color:#F9b041;    position:relative;    display: inline-block;}

Let's take a look at the style panel of the two Div

There is no margin found in BrotherDiv1.

We use JS to get a two margin:

window.onload = function(){    var div = document.querySelector(‘.brotherDiv‘);    var div1 = document.querySelector(‘.brotherDiv1‘);        console.log(div.offsetTop);     //40    console.log(div1.offsetTop);    //40}

With JS, you can get the offset of the two, which means that the brotherDiv1 is actually offset.

The use of padding is more common. Two elements are aligned by default at the bottom. And the low-altitude elements get offsets.

//css.brotherDiv{    background-color:#12B7F5;    position:relative;    display: inline-block;    padding:20px;}.brotherDiv1{    background-color:#F9b041;    display: inline-block;    position:relative;}//html<div class="brotherDiv"></div><div class="brotherDiv1"></div>//jswindow.onload = function(){    var div = document.querySelector(‘.brotherDiv‘);    var div1 = document.querySelector(‘.brotherDiv1‘);        console.log(div.offsetTop);     //0    console.log(div1.offsetTop);    //40}

Of course, the alignment of the method is believed to be very familiar to everyone.
Set CSS at low and lower elements

//把元素的顶端与行中最高元素的顶端对齐vertical: top;//把此元素放置在父元素的中部vertical: middle;//  把元素的顶端与行中最低的元素的顶端对齐vertical: bottom;

Note that the middle here is not meant to be centered relative to the inner element of the line.

Interesting to see this article: "HTML element vertically centered N method"

Delve into the properties and attributes of position in CSS