我怎么知道两个绝对的html元素何时堆叠在一起

Question

我当前项目的一些背景：我正在构建日程表。

我的结构如下：

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.label {
display: flex;
flex-direction: row;
}
.title {
border: 1px #333 solid;
padding: 10px 20px;
text-align: center;
width: 100px;
}
.task {
margin-top: 6px;
position: relative;
}
.eachTask {
position: absolute;
border: 1px #333 solid;
padding: 10px 20px;
width: 100px;
}
.task1 {
left: 100px;
}
.task2 {
left: 300px;
}
.task3 {
left: 500px;
}
.task4 {
left: 500px;
top: 40px;
}

<div>
<div class="label">
<div class="title">Monday</div>
<div class="title">Tuesday</div>
<div class="title">Wednesday</div>
<div class="title">Thursday</div>
<div class="title">Friday</div>
<div class="title">Saturday</div>
<div class="title">Sunday</div>
</div>
<div class="task">
<div class="eachTask task1">Task1</div>
<div class="eachTask task2">Task2</div>
<div class="eachTask task3">Task3</div>
<div class="eachTask task4">Task4</div>
</div>
</div>

我把任务4的顶部位置放在任务3下面。否则，它会堆叠在一起。有没有办法知道元素是重叠的还是堆叠的，这样我就可以在下面对齐它。

我有一个任务列表，每个任务都会显示在同一行上，有没有办法知道每个任务都有相同的位置或堆叠在一起，这样我就可以设置顶部的位置放在下面。(注意：我可以控制每个任务的宽度和左边的位置(。

我有一个关于循环所有任务的想法，对于每个任务，我都会将左侧和宽度值与其他所有任务进行比较。如果其中一个正在堆叠，我将插入顶部位置。但就我而言，这将是一个嵌套的循环。

谢谢http://codesandbox.io/s/crazy-cerf-jeipz?file=/index.html:0-1525

编辑：我在这里又放了一个案例来了解我的想法请将其视为甘特图

https://codesandbox.io/s/vigorous-star-rvcpe?file=/index.html

Answer 1

您能为每个任务添加一个类来表示一周中的哪一天吗？如果是这样的话，你可以通过在每个渐进任务中添加一个递增的margin-top来与js一起破解。看看我在这里做了什么：

var marginsat=-40;
$(".saturday").each(function(){
$(this).css("margin-top",marginsat+=40)
})
var margintues=-40;
$(".tuesday").each(function(){
$(this).css("margin-top",margintues+=40)
})
var marginth=-40;
$(".thursday").each(function(){
$(this).css("margin-top",marginth+=40)
})

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.label {
display: flex;
flex-direction: row;
}
.title {
border: 1px #333 solid;
padding: 10px 20px;
text-align: center;
width: 100px;
}
.task {
margin-top: 6px;
position: relative;
}
.eachTask {
position: absolute;
border: 1px #333 solid;
padding: 10px 20px;
width: 100px;
}
.task1 {
left: 100px;
}
.task2 {
left: 300px;
}
.task3 {
left: 500px;
}
.task4 {
left: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="label">
<div class="title">Monday</div>
<div class="title">Tuesday</div>
<div class="title">Wednesday</div>
<div class="title">Thursday</div>
<div class="title">Friday</div>
<div class="title">Saturday</div>
<div class="title">Sunday</div>
</div>
<div class="task">
<div class="eachTask task1 tuesday">Task1</div>
<div class="eachTask task2 thursday">Task2</div>
<div class="eachTask task3 saturday">Task3</div>
<div class="eachTask task4 saturday">Task4</div>
<div class="eachTask task4 saturday">Task5</div>
<div class="eachTask task4 saturday">Task6</div>
<div class="eachTask task1 tuesday">Task7</div>
<div class="eachTask task2 thursday">Task8</div>
<div class="eachTask task1 tuesday">Task9</div>
<div class="eachTask task2 thursday">Task10</div>
</div>
</div>