Question

this jsfiddle的目标是让第二个div位于相对于第一个div的坐标中。例如，如果第一个div的顶部/左边是160/160，那么我需要将第二个div定位在顶部+ 100 = 260，左边+ 200 = 360.这可能吗？

HTML

<div style="background-color:yellow;width:160px">
 this is the first div
</div>

<div style="background-color:orange;width:160px;position:absolute">
 this second  second div
</div>

Answer 1

有多种方法可以做到这一点，这个方法没有position: absolute，选择哪种方式很大程度上取决于预期的行为。

使用position: relative会将2：nd div保留在页面流中，因此margin和position: absolute以及float会将其从流中取出（在但有些不同的方式。）

＆＃13;

.div1 {
  position: relative;
  background-color:yellow;width:160px
}
.div2 {
  position: relative;
  top: 100px;
  left: 200px;
  background-color:orange;width:160px
}

＆＃13;

<div class="div1">
 this is the first div
</div>

<div class="div2">
 this second  second div
</div>

＆＃13;

使用position: absolute，您可以将它们准确定位在您想要的位置。

＆＃13;

.div1 {
  position: absolute;
  top: 160px;
  left: 160px;
  background-color:yellow;width:160px
}
.div2 {
  position: absolute;
  top: 260px;
  left: 360px;
  background-color:orange;width:160px
}

＆＃13;

<div class="div1">
 this is the first div
</div>

<div class="div2">
 this second  second div
</div>

＆＃13;

Answer 2

如果这就是你所需要的，这里有一个选项：

TypeB/C

还有很多方法，比如位置：绝对，或者更复杂的东西，比如flexbox。但这是一条快速的路线。

Answer 3

您可以通过两种方式完成此操作。使用保证金或使用定位。保证金将更加灵活和推荐。无论哪种方式，我希望你看到差异：

<强> HTML

<div class="box1">
 this is the first div
</div>

<div class="box2">
 this second  second div
</div>
<br>
<div class="box3">
 this is the first div
</div>

<div class="box4">
 this second  second div
</div>

<强> CSS

.box1, .box3{
    background-color:yellow;
    width:160px
}
.box2, .box4{
    background-color:orange;
    width:160px
}

.box2{
    margin-left:200px;
    margin-top: 100px;
}

.box3{
    position: absolute;

}
.box4{
    position: relative;
    top: 100px;
    left:200px;
}

在此demo

中尝试此操作

Answer 4

使用jQuery，您可以相对于彼此定位2个元素。

var secondTop = parseInt($('.first').css('top'), 10) + 100 + 'px';
var secondLeft = parseInt($('.first').css('left'), 10)  + 200 + 'px';
$('.second').css({top: secondTop, left: secondLeft});

这是JSFiddle。

对此进行扩展，您可以使用top和left属性存储您希望第二个元素偏移的金额，如下所示：

var secondTop = parseInt($('.first').css('top'), 10) + parseInt($('.second').css('top'), 10) + 'px';
var secondLeft = parseInt($('.first').css('left'), 10)  + parseInt($('.second').css('left'), 10) + 'px';
$('.second').css({top: secondTop, left: secondLeft});

$(document).ready(function(){
  var secondTop = parseInt($('.first').css('top'), 10) + parseInt($('.second').css('top'), 10) + 'px';
    var secondLeft = parseInt($('.first').css('left'), 10)  + parseInt($('.second').css('left'), 10) + 'px';
	$('.second').css({top: secondTop, left: secondLeft});
});

.first {
	position: relative; 
  background-color: yellow; 
  width: 160px; 
  top: 160px;
  left: 160px;
}

.second {
	background-color: orange; 
  width: 160px;
  position: relative;
  top: 100px;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">
 this is the first div
</div>

<div class="second">
 this second  second div
</div>

这是JSFiddle;

相对于前一个div的位置div

4 个答案: