Question

所以我想要包含一个需要保留在屏幕上的侧面图例。问题是我需要它相对于另一个元素定位它，在本例中是一个表。我确实把它放在右侧，但如果我按照自己的方式移动，如果我移动到更大的屏幕，它会一直移动到屏幕的边缘，这很烦人

<div style="position:relative;min-width:960px; max-width:1000px">
 <img src="img/untitled.png" style="position: fixed; right:0;" />
</div>
<table align="center" cellpadding="0" style="width: 800px; background-color: #E8E8E8;">
    <tr>
        <td>
        </td>
    <tr>
</table>

Answer 1

如果我理解你，你想要一个两个平铺的Screeen，一边是导航，另一边是tabel /内容/什么？然后我会使用％。

第1步：围绕所有其他元素创建一个DIV：

<div id="allContent">...</div>

第2步：在标题中创建一个样式部分 - 那就是mutch cleaner：

<head>.. <style>[css]</style></head>

第3步：

写告诉contDiv它是窗口的完整大小（在CSS部分[CSS]中）：

#allContent{   position: absolute; top: 0px; left: 0px; width:100%; height: 100% }

第4步：在#allCont DIV中创建2个DIV，它们将是左侧和右侧：

<div id="left"></div> <div id="right"></div>

的CSS：

#left{ position: absolute; top: 0px; left: 0px; width: 20%; height: 100% }
#right{ position: absolute; top: 0px; left: 0px; width: 80%; height: 100% }

现在扔你的东西..

修改

要使左侧/导航滚动，请将左侧的位置设置为固定：

#left{ position: fixed; top: 0px; left: 0px; width: 20%; height: 100%}

现在左侧/导航将滚动，右侧将保持在位置。

Answer 2

你最好的选择是通过固定定位容器，然后绝对定位你想要相对于表格的元素来解决修复元素的工作原理。

将固定元素设置为与表格宽度相同。类似的东西：

<强> HTML

<div id="fixedElemContainer">
    <div id="innerElem"></div>
</div>

<强> CSS

#fixedElemContainer{
    height:1px; /* make this 0 if you like, its really just so it doesnt cover the page content*/
    top:0;
    width: 100%;
    max-width:960px;
    position:fixed;
    right:0; /* by setting both this will move the element to the middle when we have a max-width*/
    left:0;
}
#fixedElemContainer #innerElement{
    position:absolute;
    right:0;
    top:0;
}

固定div相对于另一个元素

2 个答案: