【发布时间】：2021-07-21 12:21:46
【问题描述】：
参考下面的代码sn-p，我有：
- 类
.box的父div， - 两个子 div 的类分别为
.box-header和.box-content。
.box 的边框半径为 6px。 .box-header 上设置了 position:sticky 和 top:0。
我正在尝试将.box-header div 滑动到父级边框半径下方。但它不起作用，并且标题溢出：
由于我不能在父级上使用overflow:hidden 而不破坏其子级的position:sticky，我该如何继续？是否有一种解决方法而不会过多地弄乱 HTML 代码？此外，我不想使用 JS，因为我认为这应该纯粹用 CSS 来解决。
body {
background-color: #22272e;
color: #adbac7;
font-size: 16px;
}
h1 {
font-size: inherit;
margin: 0;
}
.box {
margin: 1.6rem 0;
border-radius: 0.6rem;
border: 0.1rem solid #444c56;
}
.box-header {
padding: 1.6rem;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
background-color: #22272e;
border-top-left-radius: 0.6rem;
border-top-right-radius: 0.6rem;
border-bottom: 0.1rem solid #444c56;
}
.box-content {
padding: 0.8rem 1.6rem;
}<div class="box">
<div class="box-header">
<h1>Heading</h1>
</div>
<div class="box-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</a>, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>感谢您的建议！
【问题讨论】：
标签： css css-position overflow sticky