关于html：为什么“位置：粘性”不适用于Core UI Bootstrap CSS

Why is 'position: sticky' not working with Core UI's Bootstrap CSS

我正在尝试使用此处找到的Core UI's react模板构建一个react仪表板。

的CSS

1
2
3
4
5
6
7

.top-stick {
position: sticky !important;
position: -webkit-sticky;
top: 5rem;
overflow-y: auto;
height: calc(100vh - 5rem);
}

JSX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<Row className="app-scrollable-body">
<Col xs="12" sm="4" md="3" className="top-stick">
<Card className="toic">
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
<Col xs="12" sm="8" md="9">
<Card>
<CardHeader>Card title</CardHeader>
<CardBody>
Lorem ipsum dolor sit amet
</CardBody>
</Card>
</Col>
</Row>

<span>
CoreUI © 2018
creativeLabs.
</span>
<span className="ml-auto">
Powered by{""}
CoreUI for React
</span>

但是在滚动时，该卡似乎并不粘。

在inspecting上，存在CSS。在CSS树中也没有overflow: hidden。

Dash

问题是在.app-body中使用了溢出。这有点棘手，但是在具有滚动元素和粘滞元素之间的任何元素上都不应设置overflow属性。

这是一个基本的例子来说明。滚动条在视口上，并且我们有一个带有overflow:hidden(甚至是auto)的包装，因此，粘滞行为将不起作用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.container {
display:flex;
align-items:flex-start;
border:2px solid green;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}

.wrapper {
overflow:hidden;
border:2px solid red;
}

如果我们消除了溢出，它将按预期工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

如果将overflow保留在包装器中，但是将滚动条移动到容器元素，则它也将起作用，因为滚动条和粘滞元素之间没有设置溢出的元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.container {
display:flex;
align-items:flex-start;
border:2px solid green;
max-height:200px;
overflow:auto;
}
.content {
flex:1;
height:200vh;
background:red;
margin:10px;
}
.sticky {
flex:1;
height:100px;
background:blue;
margin:10px;
position:sticky;
top:0;
}

.wrapper {
overflow:hidden;
border:2px solid red;
}