This is a whole process of inquiry, if you don’t want to see the process of inquiry directly look at the conclusion directly look at the very end

Yesterday I looked up some unit attributes in CSS and found that there was no article about the unit of relative positioning attribute is %. Today I will explore it.

The test environment is Chrome

Let’s look at the definition of relative attribute in W3CSchool

Relative positioning is a very easy concept to grasp. If an element is positioned relative to it, it will appear at its location. The element can then be moved “relative” to its starting point by setting its vertical or horizontal position.

That is: if you set top to 20px, the box will be 20 pixels below the top of the original position. If left is set to 30 pixels, a space of 30 pixels is created to the left of the element, which moves the element to the right.

The explanation from this official example is very straightforward indeed. But as we all know, absolute position is related to the page, fixed position is related to the viewport, so it is not difficult to see that the top and other attributes of the two are calculated according to the page and viewport when using % as the unit.

But relative is the starting point of “relative”. I just assumed that a property like top, when measured in %, would be evaluated according to its size. The following explores javascript code snippets using HTML CSS

Since margin is set to 0, we use the offset instead of the left and top values

<body>
    <div id="relative">relative</div>
</body>
Copy the code
* {margin: 0;
  padding: 0;
}
  html.body{
    height: 100%;
    background-color: skyblue;
  }
  #relative{
    width: 200px;
    height: 200px;
    background: white;
    position: relative;
    left:10%;
    top:10%;
    z-index: 2;
  }
Copy the code
  window.onload=function(){
    var div = document.createElement("div");
    div.style="position:absolute; right:10%; background-color:yellow;"
    var left = document.querySelector("#relative").offsetLeft;
    var top = document.querySelector("#relative").offsetTop;
    div.innerHTML="

relative: offsetLeft "+left+" offsetTop: "+top;
    document.body.appendChild(div);
}
Copy the code

Effect:


It is related to the size of the parent element, because the body is the parent element of the div. Then I give it a parent element with a fixed width of 300px

  <div class="test">
    <div id="relative">relative</div>
  </div>
Copy the code
.test{
    width: 300px;
    height: 300px;
    background: blue;
  }
Copy the code

And then something like this:

conclusion

When the relative position is set to the starting point of the element itself (upper left corner), the values of attributes such as top and left are based on the length and width of the parent container when the unit is %

After practice, a point should be noted: when the parent container height is adaptive, setting top to % does not work, but using fixed units such as PX can achieve positioning requirements