如何固定 <div> 在 css 中的特定位置

Question

我有三个 tables，第一个 Table margin-top 是 50px 第二个 table 有变化行取决于文本但是第三个 table 我想要修复 margin-top 是 :150px standard.

但第三个 table 无法在 margin-top:150px 上修复它，因为第二个 table 有行的变化。

即使第二个 table 有变体行，如何将第三个 table 固定在 margin-top:150px 上？

例如：

Table 1
Name : Balakrishnan

Table 2 <br>
S.No       particulars   Amount <br>
1           Desk            200 <br>


Table 3
Total :                     200

我想固定 table 3 的固定位置，即使 table2 行增加了

! 当行增加时 table 2 第三个 table 不应向下移动我试过下面的代码 .table1 { 边距顶部：10px； } .table2 { 边距顶部：15px； } .table3 { 边距顶部：30px； } 上面的代码定义在 table class

请点击上方link查看我的图片

Answer 1

我不确定你想用中间的框做什么。意思是你想让它随页面调整，还是在它获得太多信息时滚动。这听起来像是您想要一个页脚样式的框，该框在整个页面中都保持在相同的位置。查看此操作方法网站并按照页脚的说明进行操作。

这应该可以帮助您了解第 3 个框将如何保持 "fixed position"。

http://learnlayout.com/position-example.html

Answer 2

如果我理解您的问题，最佳解决方案如下：

将所有表格包装在 div
给中间div一个固定的高度和overflow: auto

HTML:

<div>
    <table>
        <tr>
            <th>Name</th>
            <td>Balakrishnan</td>
            <td>Age</td>
            <td>25</td>
        </tr>
    </table>
</div>
<div class="fixed">
    <table>
        <tr>
            <th>S.No</th>
            <th>Particulars</th>
            <th>Quantity</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Item1</td>
            <td>1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Item2</td>
            <td>1</td>
            <td>50</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Item3</td>
            <td>1</td>
            <td>50</td>
        </tr>
    </table>
</div>
<div>
    <table>
        <tr>
            <th>Total:</th>
            <td>250</td>
        </tr>
    </table>
</div>

CSS:

.fixed {
    height: 150px;
    overflow-y:auto;
    margin: 20px 0 ;
}

示例： http://jsfiddle.net/podjpv8j/

更多行示例： http://jsfiddle.net/podjpv8j/1/

如何固定 <div> 在 css 中的特定位置

How to fixed <div> in the specific location in css

css

css-float