这是我的示例HTML文件。点击我将position:fixed
添加到两个div: - claims-side-panel
和alert-section
。对于claims-side-panel
,div也向上移动,但我通过提供额外的财产margin-top:auto
来修复它。
对于alert-section
我尝试了top:0
(它进一步向上移动元素到标题)和margin-top:auto
但它不工作
<div class="claims-main-wrapper mt-4">
<aside class="col-lg-4 mt-5">
<div class="claims-side-panel">
<li>.SOme content..</li>
<li>.SOme content..</li>
<li>.SOme content..</li>
</div>
<div class="alert-section">
SOme content
</div>
</aside>
</div>
下面是添加位置之前的CSS文件:固定为claims-side-panel
和alerts-section
div.claims-main-wrapper {
.fa-spinner {
@include font-size(40px);
position: absolute;
margin: 60px auto;
left: 50%;
}
aside {
.claims-side-panel {
width: 400px;
}
}
div.alert-section {
width: 400px;
padding-top: 0;
.table thead th {
border-bottom: 1px solid $border-color;
}
.table th,
.table td {
border-top: 0;
}
.table td span.duplicateStatus {
background-color: $contribution-status-color;
padding: 7px 12px 6px 15px;
color: $text-contrast-light;
border-radius: 15px;
text-transform: uppercase;
@include font-size(12px);
text-align: center;
font-family: $tertiaryFontFamily;
padding: 7px 12px 6px 15px;
font-weight: bold;
}
}
}
position: fixed;
相对于整个浏览器窗口定位元素,而position: absolute;
将元素相对于最接近的父元素与position: relative;
定位。