css / javascript 固定正方形与其他元素访问 x / y 与 z-index答案

【问题标题】：css / javascript fixed squares with other elements on access x / y with z-indexcss / javascript 固定正方形与其他元素访问 x / y 与 z-index
【发布时间】：2023-03-24 13:42:02
【问题描述】：

我有一个两部分的问题，如果您查看下面的图表，您会发现我有一个盒子，里面有 9 个盒子。外框应该是 80%（尽管理论上任何东西），但里面的盒子必须始终保持均匀间隔，并且总是 3 x 3。虽然这可以通过 flex box 实现，但第二部分使任务对我来说变得更加复杂。然后我想在每 4 个框（右上角、左上角、右下角、左下角）的中心点添加 4 个其他元素，这些元素位于它们上方的较高 z-index 上。使用固定定位，我可以做到这一点，但这不起作用，因为由于屏幕尺寸可变，外框百分比未知。

如果答案是仅 CSS 或基于 Javascript 或组合甚至弹性框，我不介意！

第一部分

第二部分

【问题讨论】：

标签： javascript css flexbox css-position

【解决方案1】：

您可以使用 Flexbox 使用纯 CSS 来创建它。要制作完美的正方形，在调整浏览器大小时保持正方形，您可以将高度和宽度设置为相同的量（以 vh 为单位）。然后，您首先创建带边距的正方形，并在定义宽度时使用calc 包含该边距。最后，您添加了以 vh 为单位的动态圆圈的叠加层。

* {
  box-sizing: border-box;
}
.content {
  height: 80vh;
  width: 80vh;
  border: 1px solid black;
  display: flex;
  position: relative;
  flex-wrap: wrap;
}
.box {
  border: 1px solid black;
  margin: 2vh;
  flex: 0 0 calc(33.333% - 4vh);
}
.circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.top, .bottom {
  display: flex;
}
.circle {
  background: lightblue;
  height: 10vh;
  width: 10vh;
  margin: calc(10vh - 2vh);
  border-radius: 50%;
}

<div class="content">
  <div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div> <div class="box"></div> <div class="box"></div><div class="box"></div> <div class="box"></div><div class="box"></div>
  
  <div class="circles">
    <div class="top">
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
    <div class="bottom">
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</div>

【讨论】：

使用 flex-box Nenad 的纯粹类答案绝对完美简洁！
谢谢，我很高兴能帮上忙。

【解决方案2】：

如何制作一个具有固定宽度和高度的 div 容器。接下来进入该容器移动两个具有绝对位置的 div。第一个将处理 9 个盒子，第二个将处理 4 个圆圈。诀窍是：因为 div 内部的位置是绝对的，并且它们的宽度和高度加在一起大于容器大小，所以您会看到带有盒子的 div 和带有圆圈的 div。不仅仅是缩放它并设置一些 z-index。

【讨论】：

这就是我最初在脑海中接触它的方式，但我喜欢弹性盒解决方案的优雅和简单，并且向后兼容的浏览器不是问题。还是谢谢你。