Question

目前，我有一个位于页面中心的固定元素：

.class {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 300px;
    background-color: white;
}

无论屏幕大小如何，此元素始终在浏览器中显示为死角。但是，有没有办法让我的常规内容流始终在它之后开始？

我考虑过只设置一个简单的间距div，但由于这个元素是可变中心的，所以我不确定最好的方法是预测它始终存在的位置。

Answer 1

您可以使用CSS3 calc()函数为spacer元素设置height属性，以便推送内容框：

.spacer {
    height: calc(50% + 150px); /* 50% of screen + 1/2 of the height of the box */
}

<强> HTML：

<div class="class">The fixed box</div>
<div class="spacer"></div>
<div class="content">Content goes here...</div>

<强> WORKING DEMO

Answer 2

如果是position: fixed，它不会影响元素的常规流量。它具体来说就是它自己的背景。

你需要通过javascript动态定位其他内容，下面的内容可以直接放在需要移动的元素之后。

<script>
    document.currentScript.previousElementSibling.style.marginTop = document.currentScript.previousElementSibling.previousElementSibling.clientHeight + 'px';
    //# sourceURL=AP_ThemeTemplateA.page-inlinedScript1
</script>

将元素定位在固定元素下方的正常流中

2 个答案: