使 div 垂直固定但水平粘合到页面边框

发布于 2024-09-03 12:03:23 字数 528 浏览 9 评论 0原文

您可以访问:http://www.binarymark.com/Products/ColorPickerPro/ default.aspx 并记下页面的布局。

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

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

它应该是这样的 http://www.binarymark.com/layexp.png

可以你帮帮我好吗?

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

谢谢。

Can you please go to: http://www.binarymark.com/Products/ColorPickerPro/default.aspx and note the page's layout.

What I want to do is to stick or "glue" some small div to the right side of the page, that is so that it's just outside of the right frame of the page.

However, vertically I want the div to be fixed to a Window, that is no matter how much the page is scrolled, it should remain a fixed 300px from the top edge of the window.

Here's what it should look like http://www.binarymark.com/layexp.png

Can you help me please?

Seems easy, but I have no idea how to combine vertical fixed positioning and horizontal relative/absolute positioning and making sure it supports all major browsers.

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

月棠 2024-09-10 12:03:23
position: fixed;
right: 0;
top: 50%;

编辑:尝试将此 div 插入为

...

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

CSS 的第一个子元素:

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

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

position: fixed;
right: 0;
top: 50%;

Edit: try inserting this div as the first child of your <div id="content">...

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

CSS:

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

That should get you started. The width will specify how much past the content you want your tab to show (so in this case it's about 100 px). The red background is just so you can more easily see the div.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文