首页 建站教程 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实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 855
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 434
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持