Наложение div с использованием метода .position () jquery не работает

Question

Я пытаюсь сделать так, чтобы один div появлялся на другом div таким образом, чтобы они перекрывали друг друга.Я использую метод .position () jquery.

Я видел этот метод в этом вопросе Элемент позиции CSS "исправлен" внутри контейнера прокрутки

$(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

Реализация используемой вами .position() не является стандартной функцией jQuery;он получен из jQuery UI .

Если вы включите в свой код jQuery UI (после jQuery), он будет работать так, как вы ожидаете.

Если вы хотите blue чтобы не касаться границ окна, вы можете применить collision: none, как я ниже.Кроме того, я изменил ваш float: left; на 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>