CSS has two most important basic attributes that front-end developers must master: display and position.
displayThe attribute specifies the layout of the web page. Two important layouts, flexible layoutflex and grid layoutgrid .
This article describes very useful positionproperties. I hope that through 10 minutes of reading, it will help you to easily grasp the positioning of the webpage and explain how the browser calculates the position of the webpage elements, especially the newly introduced stickypositioning.
First, the role of the position attribute
positionAttributes are used to specify the position of an element on a web page. There are five positioning methods, that is, the positionattribute has five main values.
static
relative
fixed
absolute
sticky
The five values are introduced in turn below. The last one stickyis only supported by the browser in 2017, this article will focus on introduction.
Second, the static attribute value
staticIs positionthe default value of the attribute. If the positionattribute is omitted , the browser considers the element to be staticpositioned.
At this time, the browser will determine the position of each element in the order of the source code, which is called "normal flow" (normal flow).
Each block-level element occupies its own block, and there is no overlap between elements. This position is the default position of the element.
Note that the staticelement position as a result of positioning, the browser is discretionary, so when top, bottom, left, rightthese four properties is invalid.
三、relative，absolute，fixed
relative, absolute, fixedThese three properties have one thing in common, are positioned with respect to a certain point, the only difference lies in the different basis points. Therefore, as long as you understand what their basic points are, it is easy to grasp the three attribute values.
None of these three positions will affect the position of other elements, so there may be overlap between elements.
3.1 relative attribute value
relativeRepresents, with respect to a default position (i.e., staticposition) is offset, i.e., the default position of the positioning element is a base point.
It must be used with top, bottom, left, rightfor use with these four attributes, to specify the direction and distance of the offset.
div { position: relative; top: 20px; }
In the above code, the divelement is offset downward from the default position 20px(that is, from the top 20px).
3.2 absolute property value
absoluteIndicates that the offset is relative to the parent element (usually the parent element), that is, the positioning base point is the parent element.
It has an important limitation: the positioning base (generally the parent element) cannot be the staticpositioning, otherwise the positioning base will become the root element of the entire web page html. In addition, absolutethe positioning must match top, bottom, left, rightused with these four properties.
/* The HTML code is as follows <div id="father"> <div id="son"></div> </div> */ #father { positon: relative; } #son { position: absolute; top: 20px; }
In the above code, the parent element is relativepositioning, and the child element is absolutepositioning, so the positioning base point of the child element is the parent element, which is offset downward relative to the top of the parent element 20px. If the parent element is staticpositioned, the child element in the above example is offset downward from the top of the page 20px.
Note that the absolutepositioned element will be ignored by the "normal page flow", that is, in the "normal page flow", the space occupied by the element is zero, and the surrounding elements are not affected.
3.3 fixed attribute value
fixedIndicates that the offset is relative to the viewport (viewport, browser window), that is, the positioning base point is the browser window. This causes the position of the element to not change as the page scrolls, as if it were fixed on the page.
If it's with top, bottom, left, rightuse these four attributes together, it represents the initial position of the element is calculated based on the viewport, otherwise the default position is the initial position of the element.
div { position: fixed; top: 0; }
In the above code, the divelement is always at the top of the viewport and does not change as the page scrolls.
Four, sticky attribute value
stickyWith the first four values are not the same attribute, it will generate a dynamic effect, like relativeand fixedcombination: for some time is relativepositioned (self-positioning point is the default position), when the other becomes automatic fixedpositioning (positioning point is the viewport).
Therefore, it can form a "dynamic fixation" effect. For example, the search toolbar of a web page is initially at its default location ( relativepositioning) when it is loaded .
When the page scrolls down, the toolbar becomes a fixed position, always staying at the head of the page ( fixedpositioning).
When the page scrolls back up to its original position again, the toolbar will return to the default position.
stickyThe premise is to take effect, must be used with top, bottom, left, righttogether, these four attributes, can not be omitted, otherwise identical to the relativeposition, does not produce "dynamic stabilization" effect. The reason is that these four attributes are used to define the "offset distance", which the browser considers as stickythe effective threshold.
Its specific rule is that when the page scrolls and the parent element starts to leave the viewport (that is, partially invisible), as long as stickythe distance to the element reaches the effective threshold, the relativepositioning automatically switches to fixedpositioning; when the parent element completely leaves the viewport (that is, completely Invisible), fixedpositioning automatically switches back to relativepositioning.
Please see the sample code below. (Note that all browsers except IE, which has been eliminated, are currently supported sticky. However, the Safari browser needs to be prefixed with a browser -webkit-.)
#toolbar { position : -webkit-sticky ; / * safari browser * / position : sticky ; / * other browsers * / top : 20px ; }
In the above code, when the page scrolls down, #toolbarthe parent element starts to leave the viewport. Once #toolbarthe distance between the top of the viewport and the 20pxthreshold is less than (the threshold), #toolbarit will automatically become fixedpositioned to maintain 20pxthe distance from the top of the viewport .
The page continues to scroll down, the parent element completely leaves the viewport (that is, the entire parent element is completely invisible), and #toolbarreturns to the relativepositioning.
Five, sticky application
stickyPositioning can achieve some very useful effects. In addition to the "dynamic fixation" effect mentioned above, here are two more.
5.1 Stacking effect
Stacking means that when the page scrolls, the elements below cover the elements above. The following is an example of a picture stack. The picture below will scroll with the page, covering the picture above (see demo ).
The HTML code is just a few pictures.
<div><img src="pic1.jpg"></div> <div><img src="pic2.jpg"></div> <div><img src="pic3.jpg"></div>
The CSS code is extremely simple, as long as two lines.
div { position: sticky; top: 0; }
Its principle is that when the page scrolls down, each picture will become a fixedpositioning, resulting in the next picture overlapping the previous picture. A detailed explanation can be found here .
5.2 Table header lock
When scrolling a large table, the table header is always fixed, and it can also be stickyimplemented (see demo ).
The CSS code is also very simple.
th { position: sticky; top: 0; }
It should be noted that it stickymust be set on the <th>element, not on the <thead>and <tr>element, because these two elements are not relativepositioned, so there is no stickyeffect. A detailed explanation can be found here .