首页 建站教程 WEB前端 正文

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生成绝对定位的元素,是相对于浏览器窗口定位的,所以只需要定义top,bottom,left,right属性即可,但是我们要针对于父级定位该怎么实现呢。 要实现相当...

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生成绝对定位的元素,是相对于浏览器窗口定位的,所以只需要定义top,bottom,left,right属性即可,但是我们要针对于父级定位该怎么实现呢。

要实现相当于父元素定位,可以这样:
不设置fixed元素的top,bottom,left,right,只设置margin来实现它的偏移位置。这种方法本质上fixed元素还是相当于窗口定位的,实现效果上是相对于父元素定位。
代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css中position:fixed如何实现相对于父级定位</title>
        <style>
            body{ margin: 60px;}
            .parent{ 
                width: 200px; 
                height: 300px;
                background: #66a2ff; 
                position: relative;
            }
            .child{ position: fixed;
                width: 100px;
                height: 300px;
                background: #ffd266;
                margin-left: 210px;/*居父级左边偏移210px*/
            }
        </style>
    </head>
    <body>
        <div class="parent">
          <div class="child"></div>
        </div>
    </body>
</html>
打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/220.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 1932
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 1702
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持