В следующем примере я создаю простую сетку, используя классы row и cell, и хотел бы визуализировать элемент с классом task, охватывающий две ячейки сетки. Я использую стиль z-index: 2, чтобы вывести задачу наверх, но, похоже, она не работает должным образом, и я все еще вижу вертикальную сетку между двумя ячейками. В чем моя ошибка?
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style>
.row {
height: 34px;
display: flex;
flex-direction: row;
}
.cell {
border-style: solid;
border-width: 1px 0 1px 1px;
width: 60px;
min-width: 60px;
z-index: 1;
}
.last-cell {
border-right-width: 1px;
}
.task {
background-color: #3db9d3;
height: 30px;
width: 119px;
margin: 1px 0 0 1px;
z-index: 2;
}
</style>
</head>
<body>
<div class="row">
<div class="cell">
<div class="task">Task</div>
</div>
<div class="cell last-cell"></div>
</div>
</body>