position:fixed;

最新推荐文章于 2024-05-07 20:59:44 发布

CHU_HUAN

最新推荐文章于 2024-05-07 20:59:44 发布

阅读量4.2w

点赞数 8

分类专栏： CSS 文章标签： HTML5 CSS position fixed position fixed

本文链接：https://blog.csdn.net/m0_37972548/article/details/78906468

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为什么设置position：fixed；div会消失。

此文如有不正确的地方，敬请留言指出，谢谢。

1.position:fixed;作用

生成绝对定位的元素，相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。

例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动，div仍然在窗口底部。

    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        body{
            height: 1200px;
        }
        #content{
            width: 400px;
            height: 50px;
            background: dimgrey;
            position: fixed;
            bottom: 0px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div id="content">I am content!</div>
</body>

2.当页面没用滚动条时，不设置 "left", "top", "right" 以及 "bottom" 属性时，页面排版后，目标div位于父级除去margin,padding后的最顶最左处。但此时的"left", "top", "right" 以及 "bottom" 属性仍然是根据浏览器窗口取值。

    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        #box{
            margin: 20px;
            padding: 20px;
            height: 60px;
            border:1px solid darkred;
        }
        #content{
            position: fixed;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="content">I am content!</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.slim.min.js"></script>
<script>
    console.log("content top is ",$("#content").css("top"));
    console.log("content left is ",$("#content").css("left"));
</script>
</body>

3.当页面有滚动条时，不设置"left", "top", "right" 以及 "bottom" 属性时，页面排版后，目标元素“莫名其妙”消失。原因：元素的"left", "top", "right" 以及 "bottom" 属性仍然是根据浏览器窗口取值。

    <style>
        html,body,div{
            margin: 0;
            padding: 0;
        }
        #content{
            position: fixed;
        }
    </style>
</head>
<body>
<div id="headerBox" style="height: 1200px; border:1px solid red;">I am headerBox!</div>
<div id="box" style="margin: 20px;padding: 20px;height: 60px;border:1px solid darkred;">
    <div id="content">I am content!</div>
</div>
<script type="text/javascript" src="jquery-3.2.1.slim.min.js"></script>
<script>
    console.log("content top is ",$("#content").css("top"));
    console.log("content bottom is ",$("#content").css("bottom"));
</script>
</body>

此时看一下控制台，content div的top,bottom值

综上所述，不是div消失，只是相对于窗口而取值的top,left,right,bottom，让div没有出现在窗口上。运用position：fixed；一定要抱紧“ 相对于浏览器窗口"进行定位这个条件！

CHU_HUAN

关注

8
点赞
踩
33

收藏

觉得还不错? 一键收藏
5
评论
position:fixed;

为什么设置position：fixed；div会消失。此文如有不正确的地方，敬请留言指出，谢谢。1.position:fixed;作用生成绝对定位的元素，相对于浏览器窗口进行定位。可以通过设置 "left", "top", "right" 以及 "bottom" 属性给目标元素定位。例如：将id = content 的div固定在窗口底部，距离窗口左边距离200px。滚动条上下滚动
复制链接

扫一扫