Question

我需要根据<body>容器而不是最近的父容器，将表容器的位置设置为绝对容器。

固定位置不是我想要的，因为它基于视口而不是主体定位它（这是固定的预期行为）。

这里有一些细节和代码显示我想要的内容。

CSS:

@media screen and (max-width: 480px)
I need the <table> content to have an absolute position based on the <body> container
and not the <div id="SearchForm"> container which is the nearest parent with its position set



HTML:
 <body>
        <div class="page"> <!--position: absolute;-->
            <div id="Header">  <!-- position: fixed;-->
                <div class="inner">
                    <div class="header-secondary"> <!--position: absolute;-->
                        <div id="SearchForm"> <!--position: relative;-->
                            <form action="......">
                            ....<!--parent search bar form-->
                            </form>
                            <table> <!--quicksearch-->
                            ...content <!-- quicksearch results popup-->
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

这背后的原因是，当移动视图中的页面显示宽度为480px的设备时，

无论向下滚动，<header>和<div id=searchform>都会固定在屏幕/视口的顶部。

<table>是在搜索过程中弹出的快速查看搜索框，显示最近的结果。

问题是，这会导致quicksearch建议框也保持在顶部。页面的其余部分将在其下方滚动，但建议框将保持＆＃34;固定＆＃34;在屏幕的顶部。如果只有一些结果，这有点好，但是当有更多并且它超出了屏幕/视口的底部时，没有办法向下滚动建议框以查看其余结果。

我可以为溢出添加一个滚动条，但我希望能够滚动到quicksearch容器之外，如果我继续向下滚动，则会看到主体的内容。截至目前，主要内容将在快速搜索结果下滚动，但始终隐藏在其下。

如果我使用position：absolute;它将保留在屏幕的顶部，我无法向下滚动到屏幕外的结果。

如果我使用position：fixed;那么同样的事情将发生，因为它将基于其视口定位而不是基于主体

我目前唯一的工作选择是将JS加载到DOM之外，因此无论如何都可以将它放在我想要的地方。

这会在桌面视图模式下调整窗口大小超过480px时产生其他定位问题，因为根据体内深处的子容器计算偏移量会更加困难，并且在窗口调整大小时会动态调整大小。

Answer 1

只要父母的任何一方有position: absolute，就不可能将表格设置为相对于正文的position: fixed。

您必须以某种方式移动固定标头之外的<table>。

我会使用额外的包装器来切换哪个元素具有position: fixed的视口宽度：

<body>
    <div class="page"> <!--position: absolute;-->
        <div class="ExtraWrapper"> <!-- position: fixed; above 480px -->
            <div id="Header">  <!-- position: fixed; below 480px -->
                <div class="inner">
                    <div class="header-secondary"> <!--position: absolute;-->
                        <div id="SearchForm"> <!--position: relative;-->
                            <form action="......">
                            ....<!--parent search bar form-->
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <table> <!-- quicksearch. position: absolute; below 480px -->
            ...content <!-- quicksearch results popup-->
            </table>
        </div>
    </div>
</body>

基于Body容器而不是Parent容器的容器的绝对位置

1 个答案: