定位粘性不适用于列标题

Question

我想使用位置stick，但我注意到，如果内容有样式列，它就不起作用。这是我在JSFiddle中做的一个例子。https://jsfiddle.net/3f056yqv/

.sticky {
position: sticky;
top: 0;
background: #000;
color: #FFF;
}
.content {
height: 200px;
background: #FFF000;
}
.min {
width: 48%;
vertical-align: top;
display: inline-block;
}
.notworking {
columns: 100px 3;
}

<div class="min">
<div>
<div class="sticky">Working 1</div>
<div class="content">Content 1</div>
</div>
<div>
<div class="sticky">Working 2</div>
<div class="content">Content 2</div>
</div>
<div>
<div class="sticky">Working 3</div>
<div class="content">Content 3</div>
</div>
</div>
<div class="min notworking">
<div>
<div class="sticky">Not Working 1</div>
<div class="content">Content 1</div>
</div>
<div>
<div class="sticky">Not Working 2</div>
<div class="content">Content 2</div>
</div>
<div>
<div class="sticky">Not Working 3</div>
<div class="content">Content 2</div>
</div>
</div>

有解决办法吗？或者可能是一个变通办法？

Answer 1

Sticky在列逻辑中不起作用。因为列中的元素不在固定位置。例如，它们在1中浮动。2.或3。柱您可以使用grid而不是列。

.sticky {
position: sticky;
top: 0;
background: #000;
color: #FFF;
}
.content {
height: 200px;
background: #FFF000;
}
.min {
width: 48%;
vertical-align: top;
display: inline-block;
}
.notworking {
display: inline-grid;
grid-template-columns: repeat(3, 1fr);
}

<div class="min">
<div>
<div class="sticky">Working 1</div>
<div class="content">Content 1</div>
</div>
<div>
<div class="sticky">Working 2</div>
<div class="content">Content 2</div>
</div>
<div>
<div class="sticky">Working 3</div>
<div class="content">Content 3</div>
</div>
</div>
<div class="min notworking">
<div>
<div class="sticky">Not Working 1</div>
<div class="content">Content 1</div>
</div>
<div>
<div class="sticky">Not Working 2</div>
<div class="content">Content 2</div>
</div>
<div>
<div class="sticky">Not Working 3</div>
<div class="content">Content 2</div>
</div>
</div>