使用CSS相对于非父级div定位一个div

Question

我知道使用position:relative和position:absolute的技巧可以将一个 div 相对于它的父元素定位。但是如果这个 div 不是它的父元素，我想相对于它来定位它怎么办？我正在尝试实现类似这样的东西。

我也知道使用position:fixed来固定一个div，但我正在构建一个响应式网站，我想避免使用该属性。我在这里找到一个问题，其中提到使用 jQuery 来实现： 如何使用jQuery将一个元素相对于另一个元素定位？ jQuery 是唯一的方法吗？是否可以只使用 CSS 实现？

我已经放了一个示例在这里：http://jsfiddle.net/19bdpgsf/。 在这个示例中，我正在尝试将 child2 元素相对于 notparentdiv 定位，就像它相对于 parent div 定位的那样。 是否仅使用 CSS 可以实现呢？

谢谢。

- Akhoy

---

你想要定位哪个 div 以及它应该放在哪里？ - imGaurav

在 fiddle 中，child2 div 相对于 parent 的位置已经确定了，现在需要将其相对于 notparentdiv 进行定位。我在问题中已经提到了这一点。 - Akhoy

像这样的东西？http://jsfiddle.net/19bdpgsf/1/ - imGaurav

我认为使用 position 不可能实现，也许值得考虑 display: flex。 - Jan Turoň

谢谢@JanTuroň。我想我必须采用jQuery的方式，因为IE对flexbox的支持非常糟糕。 - Akhoy

Answer 1

Another way if you dont want to use css positions use offset jquery as below to position you 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>

You can position a div inside another div which is not parent with absolute relative positions as below

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

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

- imGaurav

---

不是这样的。你只是删除了父级 div 中已经存在的 position:relative。我不想要那个。 - Akhoy

不行 :). 如果我有其他相对于该父div的div呢？这会破坏样式。 - Akhoy

好的，我已经添加了另一种方法使用jQuery偏移来实现它，请看是否有帮助。 - imGaurav

Answer 2

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

也许可以用类似以下的方法将 div 移入想要的 div 中？

这会将一个 div 放置到所需的 div 中，然后使用 position:relative; 即可生效。

- Vch Cvh Hvc

Answer 3

你可以使用绝对定位（相对于整个页面的主体），但除此之外，我认为没有其他方法，只能使用jQuery。

- Robert Moore

---

但在我的例子中，position:relative已经应用于父div。它将忽略body的position:relative。 - Akhoy