Позиция div относительно предыдущего div

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

Существует более 1 способ сделать это, это один без position: absolute, и какой путь выбрать очень сильно зависит от того, что ожидаемое поведение.

Использование position: relative будет держать 2: й DIV внутри потока страницы, так будет margin и position: absolute и float возьмет его из потока (в несколько по-разному, хотя).

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

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

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

Использование position: absolute вы можете разместить их именно там, где вы хотите.

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

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

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

Answer 2

, если это все, что вам нужно, вот вариант:

<div style="background-color:yellow;width:160px"> 
 
    this is the first div 
 
</div> 
 
<div style="height:100px;"></div> 
 
<div style="background-color:orange;width:160px;margin-left:200px"> 
 
    this second second div 
 
</div>

Есть много способов, как положение: абсолютная, или даже более сложные вещи, такие как 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.

Расширение на это, вы могли бы хранить сумму, которую вы хотите 2-й элемент смещения, используя 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'; 
 
\t $('.second').css({top: secondTop, left: secondLeft}); 
 
});

.first { 
 
\t position: relative; 
 
    background-color: yellow; 
 
    width: 160px; 
 
    top: 160px; 
 
    left: 160px; 
 
} 
 

 
.second { 
 
\t 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;