浮动和固定混合定位

发布于 2024-10-14 01:00:27 字数 1213 浏览 9 评论 0原文

这是 float 和 fixed 的标准用法：

<html>
<head>
    <style type="text/css">
        #bigDiv
        {
            background-color: red;
            height: 2000px;
            width: 100px;
            float: left;
        }
        #littleDiv
        {
            background-color: green;
            height: 400px;
            width: 200px;
            float: left;            
        }
        #littleDivFixed
        {
            background-color: blue;
            height: 100px;
            width: 200px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="bigDiv">
    </div>
    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>
</body>
</html>

“littleDiv”div 位于“bigDiv”div 的右侧，但不跟随滚动，
“littleDivFixed”相反，“ div 会滚动，但相对于“bigDiv” div 的位置并不好（它总是卡在显示器的左侧）。

是否可以有一个混合这两种行为的 div ：

始终位于“bigDiv”div 的右侧（距离恒定为 10px），
始终在显示屏上（与顶部保持 10 像素的恒定距离）？

预先感谢您的帮助。

原文

here is a standard use of float and fixed :

<html>
<head>
    <style type="text/css">
        #bigDiv
        {
            background-color: red;
            height: 2000px;
            width: 100px;
            float: left;
        }
        #littleDiv
        {
            background-color: green;
            height: 400px;
            width: 200px;
            float: left;            
        }
        #littleDivFixed
        {
            background-color: blue;
            height: 100px;
            width: 200px;
            position: fixed;
        }
    </style>
</head>
<body>
    <div id="bigDiv">
    </div>
    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>
</body>
</html>

the "littleDiv" div is on the right of the "bigDiv" div but does not follow the scrolling,
the "littleDivFixed" div, on the contrary, scrolls but is not well positioned relatively to the "bigDiv" div (it is always stuck at the left of the display).

Is it possible to have a div that mixes the two behaviours :

always on the right of the "bigDiv" div (at a constant distance of 10px),
always on the display (at a constant distance of 10px from the top) ?

Thanks in advance for your help.

分享到QQ

分享到微博

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

发布评论

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

傲娇萝莉攻 2024-10-21 01:00:27

像这样？只需将 left 和 top 属性添加到 fixed div

http://jsfiddle.net/t5bK9/

好的，这适用于 Chrome 和 IE8（确保它是标准模式，而不是怪癖），但由于某种原因不适用于 jsFiddle。我不知道为什么，但它做了你想要的（我认为）。如果您想确保它始终为 10px，以防 div 调整大小，您可以向 bigDiv 添加 onResize 侦听器以重新调用 positFix 函数。

<html>
    <head>
        <style>
            #bigDiv {
                border: 1px solid red;
                height: 2000px;
                width: 100px;
                float: left;
            }
            #littleDiv {
                border: 1px solid green;
                height: 400px;
                width: 200px;
                float: left;            
            }
            #littleDivFixed {
                border: 1px solid blue;
                height: 100px;
                width: 200px;
                top: 10px;
                position: fixed;
            }
        </style>
        <script type="text/javascript">
            function $(elem) {
                return document.getElementById(elem);
            }
            function positFix() {
                $('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10;
            }
        </script>
    </head>
    <body>
        <div id="bigDiv">
        </div>
        <div id="littleDiv">
        </div>
        <div id="littleDivFixed">
        </div>
        <script type="text/javascript">
            positFix();
        </script>
    </body>
</html>

Like this? Just add a left and top attribute to the fixed div

http://jsfiddle.net/t5bK9/

Ok, this works in Chrome and IE8 (make sure it's standards mode, not quirks), but for some reason not in jsFiddle. I'm not sure why, but it does what you want (I think). If you want to be sure it is always 10px right in case the divs get resized, you could add an onResize listener to bigDiv to re-call the positFix function.

<html>
    <head>
        <style>
            #bigDiv {
                border: 1px solid red;
                height: 2000px;
                width: 100px;
                float: left;
            }
            #littleDiv {
                border: 1px solid green;
                height: 400px;
                width: 200px;
                float: left;            
            }
            #littleDivFixed {
                border: 1px solid blue;
                height: 100px;
                width: 200px;
                top: 10px;
                position: fixed;
            }
        </style>
        <script type="text/javascript">
            function $(elem) {
                return document.getElementById(elem);
            }
            function positFix() {
                $('littleDivFixed').style.left = $('bigDiv').offsetWidth + 10;
            }
        </script>
    </head>
    <body>
        <div id="bigDiv">
        </div>
        <div id="littleDiv">
        </div>
        <div id="littleDivFixed">
        </div>
        <script type="text/javascript">
            positFix();
        </script>
    </body>
</html>

回复收藏 0 原文

蘸点软妹酱 2024-10-21 01:00:27

您可以更改标记的结构吗？

我通过进行两项更改得到了您所描述的行为（在 Firefox 3.6 中）：

在littleDiv 中嵌套了littleDivFixed

不必

    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>

因此，您

    <div id="littleDiv">
        <div id="littleDivFixed">
        </div>
    </div>

为固定div 添加边距

margin-left: 10px;

设置 margin 而不是 left 可让您保持“自动”左侧定位，同时仍进行相对调整。

Can you change the structure of the markup?

I got the behavior you described (in Firefox 3.6) by making two changes:

Nest littleDivFixed inside of littleDiv

So instead of

    <div id="littleDiv">
    </div>
    <div id="littleDivFixed">
    </div>

you have

    <div id="littleDiv">
        <div id="littleDivFixed">
        </div>
    </div>

Add a margin to the fixed div

margin-left: 10px;

Setting margin instead of left lets you keep the "auto" left positioning, while still making relative adjustments.

回复收藏 0 原文

白首有我共你 2024-10-21 01:00:27

您也可以仅添加：

#littleDivFixed {
    ...
    top: 10px;
    left: 110px;
}

并设置：

body {
  width: 310px;
  margin: 0;
}

以获得正确的布局。

JSFiddle

You can also only add:

#littleDivFixed {
    ...
    top: 10px;
    left: 110px;
}

and set:

body {
  width: 310px;
  margin: 0;
}

for correct layout.

JSFiddle

回复收藏 0 原文

~没有更多了~

关于作者

灯下孤影

暂无简介

0 文章

0 评论

25 人气

关注发私信

友情链接

文江博客

浮动和固定混合定位

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

浮动和固定混合定位

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

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

已经忘了多久

15867725375

LonelySnow

走过海棠暮

轻许诺言

信馬由缰

友情链接

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