我希望大家都听说过Sticky Notes。我想要像那样堆叠东西。所以这是我到目前为止的方法。我不确定如何使其可扩展到任意数量的便笺,而不使用JavaScript。
* {
font-family: 'Segoe UI';
}
.stickynote {
position: absolute;
background: #fc0;
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"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
<div class="stickynote"> Sticky!!! </div>
问题:
- 我不能一直添加
.stickynote + .stickynote + .stickynote
。有没有更好的方法? - 这种方法(HTML结构)正确吗?
- 它不是一个好主意去嵌套它们,因为它们不会语义上正确。如果可能的话,我会使用嵌套的
<ul>
和<li>
,但我希望所有的便签都是同级的。 - 每个便签的高度是可变的,而且可能是固定的
width
。请不要硬编码height
。
注: 我准备提供尽可能多的信息。我不知道为什么这个问题会被投票关闭!