Question

我试图堆叠div（样式看起来像粘滞便笺），以便底部的部分div挂出。我最初认为没问题，我只是按照正常方式设置最顶部div的样式，然后只用底部div设置你可以看到的部分的样式（而不是使所有div的宽度和高度相同）并堆叠它们）。问题是我也想对所有div的border-radius进行相同的设置，如果我以非堆叠方式进行设置，那么应用于顶部div的border-radius不会产生与应用于底部div的任何border-radius相同的设计（因为顶部div的宽度+高度不同，我猜测）。

<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>

有没有办法解决边界半径问题没有将div调整为宽度+高度相同？
如果我要将div调整为宽度+高度相同，我该如何堆叠它们？似乎位置：div上的相对和z-index组合不会起作用，因为position：relative创建了一个新的容器块，从而以某种方式使z-index不能与其他div一起使用＆＃39;新的集装箱块。

Answer 1

如果我是你，我就是

添加另一个名为stickynote的类并找到所有常用样式（在本例中为border-radius）并将该类应用于所有类
我不确定你的意思是叠加它们 - 当我读到你的初始段落时，我认为你的意思是将它们垂直叠在y轴上，但看起来，你正在努力与z轴，所以看起来你想把它们叠加在z轴上。在这种情况下，我将它们中的所有三个放在容器中，将容器放置在相对位置，并将三个stickynote置于绝对位置，具有不同的z-index，但x / y位置相同。

Answer 2

请执行以下操作以获得更好的可扩展性：

使用普通类。
正确关闭</div>。
检查摘录。

<强>段

＆＃13;

.stickynote {
  position: absolute;
  background: #0f0;
  border: 1px solid #f90;
  border-radius: 5px;
  padding: 10px;
  width: 75px;
  top: 10px;
  left: 10px;
}
.stickynote + .stickynote {
  top: 20px;
  left: 20px;
}

.stickynote + .stickynote + .stickynote {
  top: 30px;
  left: 30px;
}

＆＃13;

<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>

＆＃13;

堆叠位置：相对

2 个答案: