<!doctype html>
<style>
div {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
}
</style>
There should be a single green square below.
<div style="background: red"></div>
<div style="background: green; top: 80px; opacity: 0.5" id="target"></div>
<script>
var target = document.getElementById('target');
target.offsetTop;
target.style.opacity = 0.9;
target.style.top = '30px';
</script>