屏幕快照 2019-01-25 12.36.37.png
层级关系
.container {
.scroller-container {
.right-container {
}
}
}
.container {
height: 300px;
width: 80%;
background: yellow;
overflow-y:auto;/scroller
}
.right-container {
position: absolute;
right: 0;
width: 20%;
height: 100px;
background-color: red;
}
.scroller-container {
width: 100%;
height: 800px;
background: white;
opacity: .5;
}
屏幕快照 2019-01-25 12.36.56.png
.container {
height: 300px;
width: 80%;
background: yellow;
overflow-y:visible;
}
.right-container {
position: absolute;
right: 0;
width: 20%;
height: 100px;
background-color: red;
}
.scroller-container {
width: 100%;
height: 800px;
background: white;
opacity: .5;
}
- 注意看滚动条的位置，二者滚动的区域不同
- auto那种方式可以实现红色区域fixed的效果（悬浮窗)
