Consider the attached screenshot. The highlighted element has a negative top margin. This makes the nodeinfobar appear lower than it should, and therefore, on top of the element itself. There is some logic in the BoxModelHighlighter that places the nodeinfobar correctly in all cases, but I think it considers the margin region as the outer-most region, and it uses this to place the infobar. But that, of course, is wrong in case the margin is negative.

Adding url & STRs: data:text/html,<style>div{margin-top:-20px;padding:30px;background:pink;border:10px solid red;width:500px;height:100px}</style><div>test</div><div>test</div> STRs: - open data:text/html,<style>div{margin-top:-20px;padding:30px;background:pink;border:10px solid red;width:500px;height:100px}</style><div>test</div><div>test</div> - highlight the second div - check the position of the "nodeinfo" tooltip (black tooltip containing "div | 580 x 180") ER: The tooltip should not overlap the element. AR: The tooltip is displayed on top of the element.