position: sticky; right: 200px; 无效
时间: 2023-12-15 14:31:22 浏览: 74
根据提供的引用内容,position: sticky属性的生效原理是元素在滚动容器中的位置,当元素滚动到容器的边缘时,元素会固定在容器的边缘位置。因此,当设置了right: 200px时,如果元素没有滚动到容器的边缘位置,那么right: 200px是不会生效的,因为元素还没有到达容器的边缘位置。如果想要元素在滚动容器中固定在某个位置,可以考虑使用position: fixed属性,并根据滚动高度设置元素的位置。
以下是一个使用position: fixed属性实现元素固定的示例代码:
```html
<style>
.container {
height: 200px;
overflow-y: scroll;
position: relative;
}
.box {
position: fixed;
top: 50px;
right: 200px;
}
</style>
<div class="container">
<div class="box">固定在右侧200px处</div>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
<p>这里是一些内容,可以滚动</p>
</div>
```
阅读全文