位置堆叠:相对的

Question

我正在尝试堆叠div(样式看起来像粘滞笔记)，这样div的一部分在底部挂起。我最初认为是可以的，我将只将最上面的div样式设置为通常的样式，然后只使用底部div(而不是将所有div设置为相同的width+height并将它们堆叠)样式。问题是，我还想将所有div的border-radius样式相同，如果我采用不堆叠的方式，那么应用于顶级div的border-radius不会产生与应用于底部div的任何边框半径相同的设计(因为对于顶部div，width+height是不同的，我猜)。

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

1. 是否有一种方法可以修复边界半径问题，而不需要调整div大小，使其都是相同的width+height？
2. 如果我将div的大小调整为所有的width+height都是相同的，我如何将它们堆栈起来？这个位置:div上的相对和z索引组合不起作用，因为位置:relative创建了一个新的容器块，从而使得z索引不适用于其他div的新容器块。

Answer 1

如果我是你，我会：

1. 添加另一个类，称为stickynote，并找到所有公共样式(在本例中为边框-半径)，并将该类应用于所有这些类。
2. 我不明白你说的堆叠它们是什么意思--当我读到你的第一段时，我以为你是说把它们垂直叠在y轴上，但表面上，你在与z轴搏斗，所以你似乎想把它们堆在z轴上。在这种情况下，我会把所有的三个放在一个容器中，定位容器的相对位置，并将三个粘贴点定位为绝对位置，具有不同的z-索引，但x/y位置相同。

Answer 2

为了获得更好的可伸缩性，请执行以下操作：

1. 使用一个普通的类。
2. 正确关闭</div>。
3. 检查一下片段。

片段

​

.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;
}

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

​