1. Introduction

In the previous two articles: CSS float float and CSS understanding of deep understanding of absolute positioning, the float is introduced and the characteristics of absolute and method of use, if you carefully read over these two articles, believe your CSS have skills and improve a lot, so while your recent condition is good, I would like to share some of the skills I have learned. On the one hand, I can have a summary of my skills to see if I have fully understood them. On the other hand, I can share them in the form of articles to please others as well as myself. Ok, let’s move on to today’s topic, and it’s the turn of another positioning property, relative. Give it up for 👏👏👏.

2. The characteristics of the relative

A. relative B. In CSS, we use “position: relative”, which translates into relative position. I do not know that in the process of using, have you ever thought of such a problem: it is relative to who positioning? Before we get to the answer, let’s give an example.

<! - HTML code - >
<div class="box">
    <div class="td">
        <div class="element1"></div>
        <h3>The use of margin</h3>
    </div>
    <div class="td">
        <div class="element2"></div>
        <h3>The use of relative</h3>
    </div>
</div>
Copy the code

You can look directly at the core CSS code:

/ * * / CSS code
.element1{
    margin-top: -30px;
}
.element2{
    position: relative;
    top: -30px
}
Copy the code

It looks like this in the browser:

In this case, the.element1 and.element2 CSS classes are used to achieve a different effect, using a margin negative to change the position of the element, and using position to change the position of subsequent elements: Relative and top negative values change the position of the element, while the position of the subsequent element does not change. In fact, this example illustrates two properties of relative positioning:

1) Relative to itself. Elements positioned using relative are offset relative to themselves.

2) Non-invasive. Elements that use relative position can be interpreted as a “phantom” that remains in its original position, so it does not affect the layout of other elements on the page. In this example, the words “relative” are still in the same position, while the words “margin” are offset.

A. relative B. relative C. relative D. relative

3.1 Restriction of relative to Absolute

As we know, absolute is positioned because its first ancestor element positioning attribute is not static. If there is no relative or fixed positioning, top/left, right/bottom and other attributes added to absolute can be offset as follows:

position: absolute;
top: 10px;
left: 10px;
Copy the code

At this point, the Absolute element is quickly positioned 10 pixels to the left and 10 pixels to the top of the bureau browser. But if position: relative is added to the parent element, absolute’s ability to offset is limited by the parent element, as shown below:

3.2 Restriction of relative on overflow

Take a look at the following example:

<! - HTML code - >
<div class="box">
    <div class="son"></div>
</div>
<div class="box" style="position: relative">
    <div class="son"></div>
</div>
Copy the code
.box{
    overflow: hidden;
    width: 50px;
    height: 50px;
    background-color: #dddddd;
}
.son{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #cd0000;
}
Copy the code

In this example, the width and height of the.box element are 50px, while the width and height of the.son element are 100px. Although the.box element has overflow:hidden, the size of the son element is 100px. The width and height of the.son element are now 50px. As shown below:

3.3 Restriction effect of relative on hierarchy Z-index

Setting the z-index value of the positioning element to a numeric value creates a “cascading context” (described in a later article). In the first figure below, margin is set to a negative value. Although z-index is set at the same time, the following elements still overwrite the preceding elements, while the position attribute is added: After “relative”, the cascading context is created. The cascading sequence of the preceding elements is high. Although margin is set at the same time, the following elements still cannot cover the preceding elements. As shown below:

<! - HTML code - >
<div class="son" style="z-index: 3"></div>
<div class="son" style="z-index: 2; margin-top: -20px; background-color: tan;"></div>
<! -->
<div class="son" style="position: relative; z-index: 3"></div>
<div class="son" style="z-index: 2; margin-top: -20px; background-color: tan;"></div>
Copy the code

The following raises a question if the opposite property is settop/bottom,left/rightHow do they represent the relative and absolute positioning elements of?

In this article, we know that absolute positioning elements are stretchable and thus maintain fluid properties, but relative positioning is “life or death”, that is, only one direction of the property is in effect, when the top/bottom elements are used at the same time, top takes effect. Left takes effect when left/bottom is used simultaneously. Take a look at this example:

<div class="box" style="position: relative; top: 10px; bottom: 500px"></div>
Copy the code

The top/bottom attribute is set at the same time, but top is in effect, as shown below:

Therefore, some of the following code is unnecessary:

.demo{
    position: relative;
    top: 10px;
    right: 10px;/ * * / invalid
    bottom: 10px;/ * * / invalid
    left: 10px
}
Copy the code

4. The usage principle of relative positioning — minimize

Although relative positioning is easy to use and frequently used, according to the layout practice principles summarized by Zhang Xinxu, it is best to base on the following principles:

  1. Try to avoid using relative. If you want to position certain elements, see if you can use “absolute position without dependency”.
  2. If the usage scenario is limited and relative must be used, be sure to minimize relative.

For example, if we want to position an icon in the upper right corner of a module, how would you layout it? Nine times out of ten, this will happen as follows:

<div style="position: relative">
    <img src="icon.png" style="position: absolute; top:0; right:0">
    <p>The content of 1</p>
    <p>Content of the 2</p>
    <p>The content of 3</p>.</div>
Copy the code

However, we can use the method of “relative minimum usage principle “, and its code is implemented as follows:

<div>
    <div style="position: relative"><img src="icon.png" style="position: absolute; top:0; right:0"> </div>
    <p>The content of 1</p>
    <p>Content of the 2</p>
    <p>The content of 3</p>.</div>
Copy the code

So, what are the benefits of a house or implementation based on the “relative principle of minimal use “? The reasons and benefits are as follows:

Cascading levels increase the relative orientation elements (stay tuned for subsequent articles), if his son element, the more the impact of the broader, from the point of view of project and maintainability, if you don’t need the small icon late, we can do it boldly relative unit element can, other element does not require any modification, Then I went to accompany my girl. However, if relative is on the outermost container, do you dare to delete it? Are you gonna go hang out with a girl? Aren’t you afraid to influence other elements? So you should only remove the small ICONS, not the relative attribute. Then your project code becomes more and more bloated, lots of useless code, looks very bad 😰. From this analysis, you can see the benefits of the “relative Minimization principle”

5. The last

The relative position attribute is used for absolute and float. The relative position attribute is used for absolute and float. The latest articles will be updated in my public account < front-end Talkking>, welcome to pay attention to.

The above is the whole content of this article, thank you for reading, if there is an incorrect statement, welcome to leave a message correction! 😊

6. Reference

  • Zhang Xinxu CSS World

You may wish to pay attention to my wechat public account “Front-end Talkking”.