position:+sticky;顶部居中
时间: 2023-11-22 21:50:37 浏览: 190
用position: sticky实现顶部悬停,吸顶效果展示视频
根据提供的引用内容,`position:sticky`可以实现吸顶操作,即让一个元素在滚动到一定位置时固定在页面的顶部。要实现顶部居中,可以将该元素的`left`和`right`属性都设置为0,再将`margin`属性设置为`auto`即可。
以下是一个示例代码:
```html
<style>
.sticky {
position: sticky;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height: 50px;
background-color: #f2f2f2;
text-align: center;
line-height: 50px;
}
</style>
<div class="sticky">
This element will be sticky and centered at the top of the page.
</div>
```
阅读全文