Negative margin left rendering proof

HTML

<p id="log"></p>
<div id="one">
  <div id="two">
    <div id="three"></div>
  </div>
</div>

CSS

div {
  width: 80%;
  height: 50%;
}

#one {
  background-color: red;
  width: 300px;
  height: 300px;
}

#two {
  background-color: black;
}

#two:hover #three {
  margin-left: -150%;
}

#three {
  margin-left: -100%;
  background-color: green;
}

JavaScript

var three = $('#three')
var log = $('#log')
console.log = str => log.text(JSON.stringify(str))
$('#two').on('mouseenter mouseleave', () => console.log(three.offset()))