【问题标题】:3 column layout, fixed vs. relative positioning CSS3 列布局,固定与相对定位 CSS
【发布时间】:2011-07-22 15:31:39
【问题描述】:

我有一个 3 列的表格布局,中心列是 position:relative;

在中心栏内,我有一个需要定位的表格:固定; (好吧,除非有其他方法)

我需要的是当浏览器变宽时表单具有流动宽度,但它也需要粘在页面底部。所以,如果我使用 position:fixed;它位于底部,但与右侧边栏重叠。如果我使用位置:相对;它像应有的那样停留在侧边栏之间,但它会随着页面滚动。

我做了一个小 jsfiddle,但它没有显示固定的定位。但是你可以看到我的代码。 http://jsfiddle.net/winchendonsprings/S5zkm/1/

在这里您可以看到它与右侧边栏重叠。 http://i.imgur.com/awp07.png

【问题讨论】:

    标签: css z-index css-position


    【解决方案1】:
    #center {
        padding: 0 15px;
        background-color: green;
        position:relative;
    }
    div.main {
        position:absolute;
        bottom:0px;
        left:0px;
        right:0px;
    }
    

    您可以尝试一下(相对定位父级中的绝对定位)。 使用顶部和底部值将其垂直定位。 (它应该随着窗口水平调整大小)。 这就是你想要的吗?

    【讨论】:

    • 是的,但它必须保持在底部,页面的其余部分在其后面滚动。
    • 你应该试试: div.main { position:fixed;底部:0px;左:150px;右:150px; } 使用 left 和 right 属性来调整 bar 和 left 列的分离
    猜你喜欢
    • 2013-08-21
    • 2014-01-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-11-16
    • 1970-01-01
    • 1970-01-01
    • 2014-12-22
    相关资源
    最近更新 更多