位置：固定，向​​上移动div

Question

这是我的示例HTML文件。点击时，我同时向两个div中添加了select url from ( select SUBSTRING(url, CHARINDEX('www', url) * 5, len(url)+1) url from Table1 ) as T group by url having count(url)=1 ：-position:fixed和claims-side-panel。对于alert-section，div也向上移动，但我通过提供附加属性claims-side-panel进行了修复。

对于margin-top:auto，我尝试了alert-section（它进一步将元素上移到标题）和top:0，但是它不起作用

margin-top:auto

以下是添加位置之前的CSS文件：固定为 <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> 和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; } } } 添加到Alert-section之前，请先找到图片，这是预期的结果

添加position:fixed后的图片

Answer 1

position: fixed;相对于整个浏览器窗口定位元素，而position: absolute;相对于具有position: relative;的最接近父元素定位元素。