Question

我正在尝试构建一个包含两个表的页面。一个表是一个小“键”，我希望它在滚动后始终保持可见，这是第二个更大的表所要求的。我可以通过“position：fixed”完成键表定位我希望第二个“结果”表位于“键”表的右侧，而不指定左边缘的确切像素位置。我已经尝试将CSS定位应用于第二个表周围的DIV，以及直接应用于表（位置：相对浮点数：左），但继续将两个表的结果放在彼此的顶部。还尝试将z-index：0应用于两个元素。我只是在兼职的基础上深入研究页面构建。我已经尝试过查看几个CSS定位指南而无法解决这个问题感谢

更新

感谢两者......理解“固定”打破了流程是关键，我读过的CSS定位文档并不明显。知道了，我在第二张桌子上使用了“margin-left：150px”，以防止它与第一张桌子碰撞。

diagram

<html>
<body>
<div>
<div style="position:fixed; top:10px; left:10px;">
<table>
<tr><th>Key</th><th>Value</th></tr>
<tr><td>Thing1</td><td>Meaning1</td></tr>
<tr><td>Thing2</td><td>Meaning3</td></tr>
<tr><td>Thing3</td><td>Meaning3</td></tr>
</table>
</div>

<div style="position:relative; float: left;">
<table>
<tr><th>Name</th></th>Group<th></th></tr>
<tr><td>Name1</td><td>Group1</td></tr>
<tr><td>Name2</td><td>Group2</td></tr>
<tr><td>Name3</td><td>Group3</td></tr>
</table>
</div>
</body>
</html>

Answer 1

您有一个具有fixed定位的密钥表。这将打破它的流程。您仍然需要一个元素来保持float: left; div不会重叠。

我会这样做：

<div style="float: left; width: 30%;">&nbsp;
    <div style="position: fixed; ...">
        ...
    </div>
</div>
<div style="float: left; width: 70%;>
    <table...>...</table>
</div>

以下是一个示例：http://jsfiddle.net/1rqarona/1/

有其他元素观察固定元素的位置

1 个答案: