To properly position elements absolutely within a wrapper using top, right, bottom, and/or left, the wrapper's position must be explicitly set to relative. Otherwise, the absolute elements will be positioned within the viewport instead.
Here is a simple example:
<style>
.wrapper
{
position: relative;
height: 100px;
width: 800px;
}
.absoluteLogo
{
position: absolute;
top: 10px;
left: 10px;
height: 60px;
width: 80px;
}
.absoluteElement
{
position: absolute;
top: 80px;
left: 320px;
height: 20px;
width: 80px;
}
</style>
<div class="wrapper">
<div class="absoluteLogo">Logo</div>
<div class="absoluteElement">Element</div>
</div>
Alternatively, you can also use margins to position the absolute elements:
<style>
.wrapper
{
height: 100px;
width: 800px;
}
.absoluteLogo
{
position: absolute;
margin: 10px 0 0 10px;
height: 60px;
width: 80px;
}
.absoluteElement
{
position: absolute;
margin: 80px 0 0 320px;
height: 20px;
width: 80px;
}
</style>
<div class="wrapper">
<div class="absoluteLogo">Logo</div>
<div class="absoluteElement">Element</div>
</div>
Both methods should yield the same result and work well across different browsers.