Html 如何创建初始偏移的粘性边栏?

Html 如何创建初始偏移的粘性边栏?,html,css,sticky,Html,Css,Sticky,我有一个侧边栏的位置重叠的网站横幅 sidebar { position: relative; top: -100px; } 部分{ 背景:url(http://www.paredownhome.com/wp-content/uploads/2016/07/post-background-placeholder.jpg); 高度:9公分; } .集装箱{ 宽度:80%; 保证金:0自动; 显示器:flex; } 主要{ flex:无; 宽度:66.6666%; 右侧填充:1em; }

我有一个侧边栏的位置重叠的网站横幅

sidebar {
  position: relative;
  top: -100px;
}
部分{
背景:url(http://www.paredownhome.com/wp-content/uploads/2016/07/post-background-placeholder.jpg);
高度:9公分;
}
.集装箱{
宽度:80%;
保证金:0自动;
显示器:flex;
}
主要{
flex:无;
宽度:66.6666%;
右侧填充:1em;
}
旁白{
位置:相对位置;
}
.在里边{
位置:相对位置;
顶部:-100px;
背景:浅灰色;
填料:2米;
}
身体{
字体系列:无衬线;
线高:1.5;
字号:18px;
颜色:#222;边距:0;}

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常

Lorem ipsum dolor,坐在amet Concertetur Adipising Elite的位子上。驱虫剂,是一种有效的治疗方法,它能有效地防止因暂时性的自由而引起的不适,使患者的面部功能恢复正常


这个
css
在Chorme上对我有用:

.aside__inner {
    position: sticky;
    top: 0;
    background: lightgrey;
    padding: 2em;
    margin-top: -100px;
} 

你试过
.aside\uu内部{位置:粘性;顶部:0;背景:浅灰色;填充:2em;页边顶部:-100px;}
?我真不敢相信我没有想到在这里使用
负页边
。。。加上这个作为回答,我会接受的,干杯!