Question

我知道position:relative和position:absolute技巧可以相对于其父级定位div。但是如果div不是它的父母而我想把它相对于那个定位呢？我正试图在这些方面实施一些东西。

我也知道position:fixed来修复div，但我正在构建一个响应式网站，我想避免这种情况。我在这里发现了一个问题，提到使用jQuery来实现它：How to position one element relative to another with jQuery? jQuery是唯一的方法吗？可以使用CSS完成吗？

我在这里竖起了一个小提琴：http://jsfiddle.net/19bdpgsf/。在小提琴中，我试图将child2元素相对于notparentdiv定位，就像它相对于parent div一样。是否可以只使用css？

感谢。

Answer 1

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>

Answer 2

您可以使用绝对定位（相对于页面的整个主体），但除此之外，我认为除了jQuery之外还有其他任何方式。

Answer 3

如果你不想使用css位置，另一种方法是使用offset jquery如下所示来定位div

＆＃13;

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

＆＃13;

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

＆＃13;

.notParent {
  background-color: red;
  position: relative;
}
.child2 {
  background-color: yellow;
  position: absolute;
  top: 10px;
}
.child1 {
  background-color: green;
  top: 30px;
}
.parent {
  background-color: purple;
}

＆＃13;

您可以将div放在另一个div中，该div不是具有绝对相对位置的父级，如下所示

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

Answer 4

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

也许使用类似这样的方法将div移到您想要的div中？

这会将一个div放入所需的div，然后position:relative;将开始工作。

使用CSS将div相对于另一个不是其父级的div定位

4 个答案: