在 Firefox 中打开开发工具会重新定位我的 CSS答案

【问题标题】：Opening dev tools in Firefox repositions my CSS在 Firefox 中打开开发工具会重新定位我的 CSS
【发布时间】：2014-12-19 15:05:22
【问题描述】：

我是 CSS 的新手，所以这可能真的很容易，也可能不会。

基本上，我的 html 看起来像这样。

<div class= "main-container">
    <div class= "searchResults">
        <div class= "searchResultsView">
            <div app-view-segment= "2"></div>
        </div>
        <div class= "noResultsMessage" ng-show= "noResults">
            <h2> Sorry, no results for {{searchQuery}} </h2>
        </div>
        <div class= "searchResultsPageNumbers">
            <footer>
                <pagination total-items= "totalSymbols" ng-model= "currentPage" ng-change= "pageChanged" max-size= 10></pagination>
            </footer>
        </div>
    </div>
</div>

CSS 看起来像这样。

.searchResults{
    position: static;
    top: 10%;
    left: 5%;
}

.searchResultsView{
    position: absolute;
    top: 10%;
    left: 15%;
    z-index: -1;
}

.noResultsMessage{
    position: absolute;
    top: 30%;
    left: 30%;
    z-index: -1;
}

.searchResultsPageNumbers{
    position: absolute;
    bottom: 3%;
    left: 38%;
    height: 100px;
    z-index: -1;
}

基本上，我有一个名为“searchResults”的块，其中包含结果、没有结果时的消息以及页码。

这看起来没问题，直到我打开开发工具（Firefox 中的 f12）。一旦我打开这些工具，页码就会重新定位到页面的中心（或者更准确地说，就在开发工具窗口的北边）。页面上的其他内容稍微重新定位，但页码受影响最大。我怀疑这是因为我将它们定位在“searchResults”的底部而不是顶部，但无论如何......

我需要编写什么 CSS，以便开发工具在打开时仅覆盖页码，而不是将它们重新定位到页面中心？如您所见，我尝试将 z-index 设置为 -1，希望这会有效，但事实并非如此。

【问题讨论】：

将searchResults的位置改为相对位置。使里面的绝对值相对于他的父母定位。
这反应很激烈......页码上升到页面顶部。相对 -> 绝对是否需要一直级联到文档顶部？我通过一些角度代码将这个特定的 html 作为一个段传递
能否在 jsfiddle 或 codepen 中重现问题？
很遗憾，没有，由于工作，我认为我无法访问任何一个：/
认为 Danko 正在解决这个问题——不过这是一个更高层次的问题——为什么你的元素都被定位了？

标签： html css firefox dom positioning

【解决方案1】：

我似乎已经通过修复“searchResults”和其中的内容来解决我的问题......但不知道这最终会有多好，所以我不会将答案标记为已接受刚刚。

【讨论】：