html - 如何让一排 div 相互重叠

Question

我正在尝试创建一组如下图所示的 div。我可以让他们都紧挨着，但我不能让小一个在另一个之上。除非我为他们制作一个父 div，否则我更愿意看看是否有更好的方法。

图片

这是代码：小提琴

div.boxes{
  width:450px;
  height:100px;
  border:1px solid #fff;
  background:#000;
  float:left;
}
div.boxes > div{
  background:#bf00bd;
  border:1px solid #999;
}
div.boxes > div.item1{
  width:50px;
  height:50px;
  float:left;
}
div.boxes > div.item2{
  width:100px;
  height:20px;
  float:left;
}
div.boxes > div.item3{
  width:100px;
  height:20px;
  float:left;
}
div.boxes > div.item4{
  width:50px;
  height:50px;
  float:right;
}
div.boxes > div.item5{
  width:50px;
  height:50px;
  float:right;
}
div.boxes > div.item6{
  width:50px;
  height:50px;
  float:right;
}

<div class="boxes">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
</div>

标签： htmlcss

Answer 1

如果您打算使用绝对单位（如您的示例）构建元素尺寸，而不是使用相对单位（as%或em），并且如果您真的（真的）不想在.boxes元素内定义另一个容器，并且如果您需要针对旧浏览器，您可以使用绝对定位。

请注意，不建议使用这种定位，因为它很难（或不可能）正确使用响应式网页设计风格。

相对定位的元素保留在文档的正常流程中。相反，绝对定位的元素被从流中取出；因此，其他元素的位置就好像它不存在一样。绝对定位的元素是相对于其最近的定位祖先（即，最近的非静态祖先）定位的。

使用这种技术，您将能够精确定位您想要固定项目的位置（相对于祖先而不是之前的兄弟）。因此，使用top / bottom和left / right属性来固定来自已定位祖先的元素。例如，top: 5px将从第一个定位祖先顶部的 5px 处固定元素（带有absolute or relative）。您可以使用像素、百分比或您需要的所有其他单位来设置这些属性。

所以，为了回答你的问题，我在下面写的这个例子是为了提供一种实现你的目标的方法，但我不建议使用它......你绝对应该创建另一个 div 来包装你的项目想要一个高于另一个。

:root {
  --boxes-width: 450px;
  --boxes-height: 100px;
  --item-padding: 10px;
  --item-width: 50px;
}

.boxes {
  position: relative;
  width: var(--boxes-width);
  height: var(--boxes-height);
  border:1px solid #fff;
  background:#000;
  float:left;
}

.item {
  position: absolute;
  background:#bf00bd;
  border:1px solid #999;
  top: var(--item-padding);
}

.item:first-child {
  width:var(--item-width);
  height:calc(var(--boxes-height) - var(--item-padding) * 2);
  left: var(--item-padding);
}
.item:nth-child(2),
.item:nth-child(3) {
  width: calc(var(--item-width) * 2);
  height:calc((var(--boxes-height) - var(--item-padding) * 2) / 2 - (var(--item-padding) / 2));
  left: calc(var(--item-width) + (var(--item-padding) * 2));
}
.item:nth-child(3) {
 top: calc(var(--boxes-height) / 2 + (var(--item-padding) / 2));
}

.item:nth-child(n+4) {
  position: relative;
  float: right;
  width: var(--item-width);
  height: calc(var(--boxes-height) - var(--item-padding) * 2);
  margin-right: var(--item-padding);
}

<div class="boxes">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

实际上，即使在很多情况下不推荐这种技术，它也可以满足您的需求。有时，绝对定位是最好的选择。这取决于您的目标、代码为您提供的灵活性以及您想要定位的浏览器。做事与否没有标准的方法，因为使用绝对定位本身并没有错。尽管如此，还是有一些最常见的用法可以使您的代码更易于维护，并且针对不同用法的可访问性进行了更优化。

在您的情况下，我认为您可以将想要的项目一个一个包装在另一个之上由 parent div。实际上，div已经创建了元素以提供将某些代码合并到特殊布局中的可能性。在其他包装器中使用 adiv作为容器并不是一个坏习惯。div但是您应该避免在不需要时使用无用的包装器，因为它会减慢渲染、DOM、CSSOM 关系并使您的代码更难阅读（以及其他问题）。你是唯一可以判断是否有必要的人。简而言之，使用一个或两个包装器绝对不是一个坏习惯。

因此，根据您的目标浏览器，实现它的好方法可能是：

我更新了我的答案，为您提供更多提示，以便您了解您的选择。当您在示例中使用浮动系统时，我编写了一个也使用它的代码，该代码与许多（和旧）浏览器兼容。

以下代码可以根据您的需要进行优化，我在您编写代码时重用了您的代码。另外，我自愿使用float系统而不是grid系统flexbox，以便尽可能针对大多数浏览器。请记住，网格系统是另一种（非常）好的和现代的减少代码的方法，但它目前不适用于每个浏览器。正如在另一个答案中编码的那样，grid布局很强大，您应该考虑一下。特别是因为所有现代浏览器都可以使用它。

.boxes{
  position: relative;
  width: 100%;
  max-width: 450px;
  height: 100px;
  border:1px solid #fff;
  background:#000;
  float:left;
  padding: 10px;
  box-sizing: border-box;
}

.box { 
  height: 100%;

}
.box--left{ float: left }
.box--left > .item { float: left; }
.box--right{ float: right }
.box--right .item:last-child { margin-right: 0; }
.box-vert { 
  width: 100px;
  float: left;
}
.box-vert .item { 
  height: calc(50% - 5px);
  width: 100%;
}

.item{
  background:#bf00bd;
  border:1px solid #999;
  width: 50px;
  height: 100%;
  margin-right: 10px;
  display: inline-block;
}

<div class="boxes">
  <div class="box box--left">
    <div class="item"></div>
      <div class="box box-vert">
        <div class="item"></div>
        <div class="item"></div>
     </div>
  </div>
  <div class="box box--right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>