Five ways of CSS positioning

Time:2020-12-16

position

According to other people’s information, I organize my own notes, consolidate the knowledge points of five positioning methods in CSS, review the old and know the new, and constantly improve myself in the work.

The five values of the position property:

  • static
  • relative
  • fixed
  • absolute
  • Sticky (viscous positioning)

The following is the direct figure and code example:

static

The default value of position of all elements in html is static, which will follow the HTML layout process. Static does not take effect for the top, left, right, bottom settings.

For example, if I put a div with a height of 120px above the div of static, the static attribute div will be squeezed down.

<div class="height"></div>
<div class="static"></div>
.static{
  position:static;
  width:360px;
  height:360px;
}
.height{
  width:750px;
  height:120px;
}

Five ways of CSS positioning

absolute

Absolute positioning: an element is located by its nearest parent container. The value of the parent container position must be: relative, absolute, fixed. If there is no such parent element, the element will be positioned relative to the body.

The absolute positioning offset value is determined by its top, bottom, left and right values.

If an absolutely positioned element is beyond the boundary of its parent element, in which parent class do you want to hide the overflow part, the parent class must also set position to relative / absolute / fixed, and overflow needs to be set to hidden.

Consider the following examples:

<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute"></div>
.height{
  width:750px;
  height:120px;
}
.absolute{
  position:absolute;
  width:240px;
  height:240px;
  right:80px;
  bottom:60px
}

Five ways of CSS positioning

From the above figure, absolute positioning is not affected by the height element layout.

We are copying several copies of the height element to make the scroll axis appear on the page. At this time, we will find that the absolute element will scroll with the scroll axis.

Five ways of CSS positioning

In addition, as shown in the following figure, if we nest the absolute element into the absolute element, the innermost div will be located according to the position of the absolute element of the parent layer. It just confirms that the element mentioned above will locate its nearest parent container. The value of the parent container position must be: relative, absolute, fixed. If there is no such parent element, the element will be positioned relative to the body.

<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="absolute">
  <div class="absolute"></div>
</div>

Five ways of CSS positioning

relative

Relative and static are very similar. They both follow the HTML typesetting process, but they have more settings for top, left, right and bottom than static. In other words, besides following the HTML typesetting process, it also adjusts its position through top, left, right and bottom. Here are some examples:

<div class="height"></div>
<div class="relative"></div>
.height{
  width:750px;
  height:120px;
}
.relative{
  position:relative;
  width:360px;
  height:360px;
  top:60px;
  left:150px;
}

Five ways of CSS positioning

As can be seen from the above figure, the relative element floats with the layout of height and is positioned according to top and left.

Added a div, relative element moves down.

<div class="height"></div>
<div class="height"></div>
<div class="relative"></div>

Five ways of CSS positioning

The most important function of relative is the sub element in it. If the positioning method is absolute, the sub element will be located according to the relative position.

<div class="height"></div>
<div class="height"></div>
<div class="relative">
  <div class="absolute"></div>
</div>
.height{
  width:750px;
  height:120px;
}
.relative{
  position:relative;
  width:360px;
  height:360px;
  top:60px;
  left:150px;
}
.absolute{
  position:absolute;
  width:240px;
  height:240px;
  right:80px;
  bottom:60px;
}

Five ways of CSS positioning

From this figure, we can see that the right and bottom of the absolute sub element are positioned according to the position of the relative element. This is very common in everyday projects.

If you replace the relative element with static, you will find that the absolute element completely ignores the static element.

<div class="height"></div>
<div class="height"></div>
<div class="static">
  <div class="absolute"></div>
</div>

.height{
  width:750px;
  height:120px;
}
.static{
  position:static;
  width:360px;
  height:360px;
}
.absolute{
  position:absolute;
  width:240px;
  height:240px;
  right:80px;
  bottom:60px;
}

Five ways of CSS positioning

fixed

Fixed and absolute are very similar in two aspects

  • Fixed is positioned in a fixed position on the screen, so fixed remains there even if you scroll the page.
  • If the fixed element has the top, left, right and bottom attributes set, then even if it is placed in relative, the fixed element will locate according to the page, that is, the body, rather than the relative element.
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="fixed"></div>
.height{
  width:750px;
  height:120px;
}
.fixed{
  position:fixed;
  width:240px;
  height:240px;
  left:80px;
  bottom:60px;
}

Five ways of CSS positioning

Let’s first look at the figure below. We nested the fixed element into the relative element without setting the top, left, right and bottom attributes. At this time, the fixed element will be typeset according to the parent element relative

<div class="height"></div>
<div class="relative">
  <div style="background-color:red;width:50px;height:50px;position:fixed" ></div>
</div>
.height{
  width:750px;
  height:120px;
}
.relative{
  position:relative;
  width:360px;
  height:360px;
  top:60px;
  left:150px;
}

Five ways of CSS positioning

Once the fixed element has set the top, left, right and bottom attributes, even if it is placed in relative, the fixed element will locate according to the page, that is, the body, rather than the relative element

<div class="height"></div>
<div class="relative">
  <div style="background-color:red;width:50px;height:50px;position:fixed;top:50px;left:10px;" ></div>
</div>

Five ways of CSS positioning

Sticky (viscous positioning)

Sticky is a new attribute of CSS location, which can be said to be the combination of relative positioning and fixed positioning;

It is mainly used to monitor the scroll event. In short, in the process of sliding, when the distance between an element and its parent element reaches sticky positioning requirements;

position:sticky At this time, the effect is fixed to the appropriate position relative to fixed positioning.

As shown in the figure, we add the height element until the scroll axis appears.

<div class="height"></div>
<div class="height"></div>
<div class="sticky"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
<div class="height"></div>
.height{
  width:750px;
  height:120px;
}
.sticky{
  position:sticky;
  width:240px;
  height:90px;
  top:0;
}

Five ways of CSS positioning

When we slide the scroll axis up the page, when the sticky element touches the top of the page, it is fixed at the top. Fixed to the top because we set his top to 0. So when top is 0 PX away from the top, it will be triggered. As shown in the figure below:

Five ways of CSS positioning

Five ways of CSS positioning

Sticky positioning can implement flexible fixed scenes with less code, such as navigation bar. However, from the point of compatibility, it is still relatively poor because it is a new attribute of CSS. We can refer to the following browser compatibility chart and find that browsers have been gradually supported since 2014

Five ways of CSS positioning

Five ways of CSS positioning

The five ways of positioning in CSS are introduced.

Finally, I’d like to thank Steven from coding startup of station B for learning video. According to his video and material, combined with my own understanding of the notes, used to consolidate and improve myself in the work.

Recommended Today

JS function

1. Ordinary function Grammar: Function function name (){ Statement block } 2. Functions with parameters Grammar: Function function name (parameter list){ Statement block } 3. Function with return value Grammar: Function function name (parameter list){ Statement block; Return value; } Allow a variable to accept the return value after calling the function Var variable name […]