我正在try 使给定容器内的一组div相互重叠:
.container {
display: inline-block;
position: relative;
}
.block {
position: absolute;
left: 0;
top: 0;
}This is a <div class="container">
<div class="block" style="background: rgba(255, 0, 0, 0.3);">wonderful</div>
<div class="block" style="background: rgba(0, 255, 0, 0.3);">cool</div>
<div class="block" style="background: rgba(0, 0, 255, 0.3);">great</div>
</div> test!以便它们与文本内联.问题是:容器没有宽度或高度，子元素们的位置也不正确.
诀窍是不必显式地指定容器的大小，而是让CSS自动计算出来，以便这三个词与句子重叠.
解决方法是将container和inline-grid设置为place-items: start(这样其子项只占用最小空间，栅格宽度将由其最长的子项确定)，然后将其所有grid-column和grid-row的子项设置为1:
.container {
display: inline-grid;
place-items: start;
}
.block {
grid-column: 1;
grid-row: 1;
}This is a <div class="container">
<div class="block" style="background: rgba(255, 0, 0, 0.3);">wonderful</div>
<div class="block" style="background: rgba(0, 255, 0, 0.3);">cool</div>
<div class="block" style="background: rgba(0, 0, 255, 0.3);">great</div>
</div> test!