css – 混合浮动和固定定位

前端之家收集整理的这篇文章主要介绍了css – 混合浮动和固定定位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是浮动和固定的标准用法
<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),
>始终在显示屏上(距离顶部10px的恒定距离)?

_

在此先感谢您的帮助.

解决方法

你能改变标记的结构吗?

通过进行两项更改,我得到了您描述的行为(在Firefox 3.6中):

将littleDivFixed嵌入littleDiv中

而不是

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

你有

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

为固定div添加边距

margin-left: 10px;

设置边距而不是左边可让您保持“自动”左侧定位,同时仍进行相对调整.

原文链接:https://www.f2er.com/css/242293.html

猜你在找的CSS相关文章