Overlapping divs using .position() method of jquery not working

Question

I'm trying to make one div appear on other div in such a way that they overlap each other. I'm using .position() method of jquery.

I've seen this method in this question CSS position element "fixed" inside scrolling container

$(function() {
  $(".blue").position({
    my: "right top",
    at: "left center",
    of: ".red"
  });
});

.red,
.blue {
  float: left;
  width: 200px;
  height: 200px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="blue">
</div>
<div class="red">
</div>

Answer 1

The implementation of .position() that you're using is not a standard jQuery feature; it comes from jQuery UI.

If you include jQuery UI in your code (after jQuery), it behaves as you'd expect.

If you want blue to not concern itself with window boundaries, you can apply collision: none as I have below. Additionally, I've changed your float: left; to a position: absolute;.

$(function() {
  $(".blue").position({
    my: "right top",
    at: "left center",
    of: ".red",
    collision: "none"
  });
});

.red,
.blue {
  position: absolute;
  width: 200px;
  height: 200px;
}

.red {
  background: red;
}

.blue {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>
<div class="blue">
</div>
<div class="red">
</div>