By adjusting the top value of an element, you are essentially moving it vertically on the page without affecting its other positioning properties. So, if you have an element that originally had some white space around it and then apply a top value, it will likely shift downwards to cover the empty space. In the provided code snippet, it seems like the element has been moved so far down that it now aligns with the bottom.
The challenge in proposing a solution lies in understanding how your question relates to the screenshot attached. The image displays a div that spans the full height of the window and does not seem to have any top setting at all. Additionally, the properties of #Content are shown in a popup while the Inspector panel highlights the body element selection.
As an initial suggestion, consider inserting a spacer div at the bottom of your content div to create a visible white block there.
div {
position: relative;
}
.content {
background-color: grey;
position: relative;
top: 136px;
}
.spacer {
background-color: white;
height: 60px;
}
<div class="content">
<p>Lorem Ipsum1<br>Lorem Ipsum2<br>...</p>
<div class="spacer"></div>
</div>