传统的position: fixed;是相对于窗口的固定定位，但是实际项目中经常会遇到需要根据指定父元素固定定位的情况。研究后找到了两种可行的实现方案。以下代码的效果是.header会相对于.wrapper固定显示，这就实现了相对于父元素的固定定位。
1
2
3
4
5
6
| <div class="wrapper">
<div class="header">little title</div>
<div class="content">
<div v-for="(item, index) in new Array(30)">item - {{index}}</div>
</div>
</div>
|
方案一
父元素相对定位，标题正常布局，内容绝对定位。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .wrapper {
position: relative;
height: 320px;
line-height: 40px;
text-align: center;
.header {
background-color: #fbb1b1;
}
.content {
position: absolute;
width: 100%;
top: 40px; // 避免遮住标题
bottom: 0;
overflow: scroll; // 必加，否则列表无法滚动
background-color: #ccfff3;
}
}
|
方案二
父元素相对定位，标题绝对定位，内容正常布局。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .wrapper {
position: relative;
height: 320px;
line-height: 40px;
text-align: center;
padding-top: 40px; // 避免遮住内容
.header {
background-color: #fbb1b1;
position: absolute;
top:0px;
width: 100%;
}
.content {
height: 280px;
overflow: scroll;
background-color: #ccfff3;
}
}
|