How to calculate percentage in top property in css? [closed]

First, a clarification, I guess I should know, but stressing, the top property will only work with the enlightenment > property position , and that choice should be well done, as you can see.

The percentage will actually do a percentage calculation according to the size of the "parent element", however, will vary according to some factors, such as:

The Hierarchy of Elements

The property position: relative

If you wanted to use the percentage on a loose page element, which is not a "child" of any other element, the percentage will refer to the "parent of all", body , in other words, the size of the own window.

But if it belongs to another element, it will follow the same logic, it will relate to the size of this parent. Example:

#filho{
  width: 50px;
  height: 50px;
  background: #333333;
  position: relative;
  top: 50%;
}
#pai{
  width: 300px;
  height: 300px;
  background: #f09
  }

<div id="pai">
  <div id="filho"></div>
</div>

However, there is a certain malleability when using position: relative , because the position will be relative :) to the existence of other elements. Example:

#filho1{
  width: 50px;
  height: 50px;
  background: #333333;
  position: relative;
  top: 50%;
}
#filho2{
  width: 50px;
  height: 50px;
  background: #cccccc;
  position: relative;
  top: 50%;
}
#pai{
  width: 300px;
  height: 300px;
  background: #f09;
  position: absolute;
  }

<div id="pai">
  <div id="filho1"></div>
  <div id="filho2"></div>
</div>

How can you notice a chain? In the example, filho1 "moved" filho2 . What will not happen in position: absolute .

O position: absolute

The chaining will not happen in this case the children will overlap, they do not take into account the existence of each other:

#filho1{
  width: 50px;
  height: 50px;
  background: #333333;
  opacity: 0.5;
  position: absolute;
  top: 50%;
}
#filho2{
  width: 50px;
  height: 50px;
  background: #cccccc;
  opacity: 0.5;
  position: absolute;
  top: 50%;
}
#pai{
  width: 300px;
  height: 300px;
  background: #f09;
  position: absolute;
  }

<div id="pai">
  <div id="filho1"></div>
  <div id="filho2"></div>
</div>

Was that what you wanted to know? If so, I hope you have understood, and any questions ...