Поместите div относительно другого div, который не является его родителем, используя CSS

Я знаю трюк position:relative и position:absolute, чтобы расположить div относительно его родителя. Но что, если div не является его родителем, и я хочу поместить его относительно этого? Я пытаюсь реализовать что-то в этом направлении.

Я также знаю position:fixed, чтобы исправить div, но я создаю отзывчивый веб-сайт, и я бы хотел этого избежать. Я нашел здесь вопрос, в котором упоминается использование jQuery для этого: Как разместить один элемент относительно другого с помощью jQuery? Является ли jQuery единственным способом сделать это? Можно ли это сделать и с помощью CSS?

Я выложил здесь скрипку: http://jsfiddle.net/19bdpgsf/. В скрипке я пытаюсь поместить элемент child2 относительно notparentdiv так же, как он был помещен относительно div parent. Возможно ли использовать только css?

Ответы

Ответ 1

Вы можете использовать абсолютное позиционирование (относительно всего тела страницы), но кроме этого я не думаю, что есть другой способ, чем jQuery.

Ответ 2

Еще один способ, если вы не хотите использовать позиции css, используйте смещение jquery, как показано ниже, чтобы разместить div

var nonparent = $('.notParent');
var position = nonparent.offset();
$('.child1').offset({
  top: position.top,
  left: position.left
});

.notParent {
  background-color: red;
  padding: 20px;
}
.child2 {
  background-color: yellow;
}
.child1 {
  background-color: green;
}
.parent {
  background-color: purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notParent">
  not parent div
</div>
<br/>
<br/>
<br/>
<br/>
<div class="parent">
  parent
  <div class="child1">child1</div>
  <div class="child2">
    child2
  </div>
</div>

Ответ 3

var position = document.getElementById("relative");
document.getElementById("").appendChild(position);

может быть, использовать что-то вроде этого, чтобы переместить div в div, в котором вы хотите это?

Это поместит div в желаемый div, и оттуда position:relative; будет работать.