Question

请耐心等待，因为这需要一些解释......

历史记录：为了创建一个固定宽度的2列布局，右列固定在窗口的顶部，我使用以下一般方法（这是概念性代码，而不是实）。

HTML

<div class="wrap">
  <div class="left"></div><div class="right"></div>
</div>

CSS

.wrap { width: 1000px; }
.left { width: 700px; display: inline-block; }
.right {
  width: 300px;
  display: inline-block;
  position: fixed;
  top: 0;
  right: auto; }

问题：我有一个使用此方法的网站，其中右侧容器间歇性地呈现在左侧容器的顶部，而不是按预期方式在其右侧。这只发生在Chrome中，您可能需要刷新页面几次以查看问题。

Here's a link to the site

The Catch ：我知道该页面上有一百个内容，而且“正确：自动;”规则取决于元素静态定位的位置。但是，如果您在开发工具（DOM中的#sidebar）中检查正确的容器并将其CSS位置从固定更改为静态，则会跳转到预期的布局位置。然后，如果你将它改回固定，它就会停留在那里。这对我来说似乎很奇怪（错误）。

底线：在我看来，在最初绘制页面时，Chrome偶尔会错误地计算布局。我不太了解浏览器在绘制页面时处理计算的顺序，并且难以理解为什么会发生这种情况或如何开始调试此问题。我希望特殊情况会让那些了解这些事情的人知道我可以从哪里开始寻找。

Answer 1

我不确定为什么你的初始错误会发生，但是我发现你有#inner-wrap的固定宽度，所以在display:inline-block上删除#sidebar而不是{{1}在它上面padding-left:75px。这应该在所有浏览器中看起来完全相同。

这是fiddle

Answer 2

你应该使用position作为绝对位置。查看这篇文章 [http://www.w3schools.com/css/css_positioning.asp][1]

Answer 3

我花了几分钟为你创建一个合适的布局。

我无法说出为什么这首先起作用，就像我在评论中说的那样：

CSS规范要求position：fixed锚定到视口，而不是包含定位元素。

无论如何，我想出的是：

CSS：

/* In case a css reset is not used */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body { margin: 0 }

.container {
    width: 800px;
    margin: 0px auto;
    background-color: red;
}

#header {
    background-color: yellow;
    height: 180px; // Can be removed if should be automatically set
}

#header, #content {
    width: 555px;
}

#content {
    position: relative;
    z-index: 999;
}

#sidebar {
    position: fixed;
    width: 800px;
    top: 0;
}

#sidebar-content {
    float: right;
    width: 245px;
    background-color: blue;
    height: 900px;
}

HTML：

<div class="container">
    <div id="header">
        <!-- img tag goes here -->
    </div>
    <div id="content"></div>
    <div id="sidebar">
        <div id="sidebar-content">Test</div>
    </div>
</div>

Fiddle

CSS“位置：固定;” Chrome中的布局不一致

3 个答案: