【问题标题】:Making div fixed vertically but glued to the page's border horizontally使 div 垂直固定但水平粘在页面的边框上
【发布时间】:2010-05-29 01:07:47
【问题描述】:

能否请您前往:http://www.binarymark.com/Products/ColorPickerPro/default.aspx 并注意页面布局。

我想要做的是将一些小 div 粘贴或“粘合”到页面的右侧,这样它就在页面的右框架之外。

但是,我希望将 div 在垂直方向上固定到一个窗口,即无论页面滚动多少,它都应该与窗口的顶部边缘保持固定的 300 像素。

这就是它的样子http://www.binarymark.com/layexp.png

你能帮帮我吗?

看起来很简单,但我不知道如何结合垂直固定定位和水平相对/绝对定位并确保它支持所有主要浏览器。

谢谢。

【问题讨论】:

    标签: css html positioning fixed


    【解决方案1】:
    position: fixed;
    right: 0;
    top: 50%;
    

    编辑:尝试将此 div 作为<div id="content">...的第一个孩子插入

    <div class="right-tab">TEXT</div>
    

    CSS:

    .right-tab {
        position: fixed;
        top: 50%;
        width: 1100px;
        background-color: red;
        text-align: right;
    }
    

    这应该让你开始。宽度将指定您希望标签显示的内容超出多少(因此在本例中约为 100 像素)。红色背景只是为了让您更容易看到 div。

    【讨论】:

    • 谢谢,但是我应该在 DOM 层次结构中的哪个位置放置 div?
    • 正确:0 不起作用,因为 div 不能粘在窗口上,而是粘在页面的框架(即其他 div)上,如下图所示:binarymark.com/layexp.png
    • @ANeves:你建议做什么?
    • 我建议,对于 CSS:top: 300px;,没有文本对齐,没有宽度。并且可能在 HTML 示例中添加一个容器,以便效果变得清晰:&lt;div id="container" style="border: solid red 1px; margin:20px;"&gt;&lt;div class="right-tab"&gt;TEXT&lt;/div&gt;&lt;/div&gt;
    • 没问题。别人的工作比我自己的有趣多了!
    猜你喜欢
    • 2019-07-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-11-08
    相关资源
    最近更新 更多