JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">
  <div class="element">
  </div>
</div>

CSS

.page {
  overflow: hidden;
  width: 200px;
  height: 200px;
  position: relative;
  background: black;
}

.element {
  width: 100px;
  height: 100px;
  position: absolute;
  background: blue;
  top: -10px;
  left: 10px;
}

JavaScript

var pageWidth = $(".page").width();
var pageHeight = $(".page").height();
var pageTop = $(".page").offset().top;
var pageLeft = $(".page").offset().left;

var elementWidth = $(".element").width();
var elementHeight = $(".element").height();
var elementTop = $(".element").offset().top;
var elementLeft = $(".element").offset().left;


if ((elementLeft >= pageLeft) && (elementTop >= pageTop) && (elementLeft + elementWidth <= pageLeft + pageWidth) && (elementTop + elementHeight <= pageTop + pageHeight)) {
  // Its inside
  alert('Inside');
} else {
  //
  alert('Outside');
}