大家都知道，当position的值为fix时，生成绝对定位的元素，相对于浏览器窗口进行定位。

它常常应用的场合是，当下拉滚动条时固定导航栏到顶部，将广告固定在页面两侧或浏览器中间。

如果需要将导航栏div固定到浏览器顶部，只需要将top设置为0即可。

如果要将广告div固定在特定位置，只需要用js计算出div应显示的位置，再设置top和left属性。

当我们想要设置一个div相对于其父元素定位，大家一定会想，将父元素position设置为relative，子元素为absolute不就可以了吗？

但有些时候，我们想要这个div相对父元素定位，要想保留fix定位的一些特征。比如，一个父容器下有一个div，我们想将这个div固定在父容器的顶部（而不是整个浏览器的顶部），当拉动滚动条时它的位置不发生变化，这时应该怎么做呢

如上图，我们想实现的效果是，红色部分固定在content的顶部位置，实现代码为

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

     <title> 页面名称 </title>

 <style type="text/css">

 html, body {

     margin: 0;

     padding: 0;

 }

 </style>

 </head>

 <body>

 <div id="par" style='margin-top:150px;background-color:blue; position: relative;height:1500px'>

 <div id="fix" style="position: absolute;top:0px;left:60px;width:180px;background-color:red;">

 这个是固定的DIV

 </div>

 </div>

 <script type="text/javascript">

 window.onscroll = function () {

     var fix = document.getElementById("fix");

     var par = document.getElementById("par");

     var st = document.documentElement.scrollTop || document.body.scrollTop;

     var pt = par.offsetTop;

     fix.style.position = st>pt ? "fixed" : "absolute";

 }

 </script>

 </body>

 </html>

还有一种存在左侧导航栏的情况

实现代码为

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

     <title> 页面名称 </title>

     <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.js"></script>

 <style type="text/css">

 html, body {

     margin: 0;

     padding: 0;

 }

 </style>

 </head>

 <body>

 <div>

    <div style="width:100%;height: 100px; background-color: #ccc;">

    </div>

    <div>

           <div style="width:20%;height:100%;background-color: #bbb;float: left">333333333333</div>

        <div id="par" style=' float: left; width:80%;background-color:blue; position: relative;height: 1500px'>

                <div id="fix" style="position: absolute;top:0px;left:0px;width:100%;background-color:red;height:100px">

                这个是固定的DIV

               </div>

               <div id='ct' style="margin-top: 120px">

                </div>

         </div>

    </div>

 </div>

 <script type="text/javascript">

 window.onscroll = function () {

     var fix = document.getElementById("fix");

     var par = document.getElementById("par");

     //var sp = document.getElementById("sp");

     var ct = document.getElementById("ct");

     var st = document.documentElement.scrollTop || document.body.scrollTop;

     var pt = par.offsetTop;

     if (st>pt) {

         fix.style.left = par.offsetLeft + "px";

         fix.style.width = par.offsetWidth +  "px";

         fix.style.position = "fixed";

        var top = (document.documentElement.scrollTop - 200 + 120) + 'px';

        console.log(top);

         $(ct).css('margin-top','120px');

     } else {

         fix.style.left = "0px";

         fix.style.width = "100%";

         fix.style.position = "absolute";

     }

 }

 </script>

 </body>

 </html>

position:fix相对父元素定位的更多相关文章

  1. position:fixed 相对父元素定位

    position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...

  2. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  3. 关于元素设置margin-top能够改变body位置的原因及解决（子元素设置margin-top改变父元素定位）

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  4. 【随笔】关于绝对定位absolute相对于父元素定位的问题

    绝对定位absolute的官方定义: 设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块.元素原先在正常文档流中所占的空间会关闭,就好像该元素 ...

  5. 内层元素设置position:relative后父元素overflow:hidden overflow:scroll失效 解决方法

    内层元素设置position:relative后父元素overflow:hidden overflow:scroll 都失效 解决方法:在position:relative的外层父容器加positio ...

  6. margin-top影响父元素定位

    写样式时无意中发现margin-top会影响到父元素的定位,下面是示例: HTML代码: <div class="demo"> <div class=" ...

  7. jquery的相对父元素和相对文档定位示例代码

    在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...

  8. CSS 实现：父元素包含子元素，子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  9. 父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

随机推荐

  1. 样本失衡会对SVM的影响

    假设正类样本远多于负类 1.线性可分的情况 假设真实数据集如下: 由于负类样本量太少,可能会出现下面这种情况 使得分隔超平面偏向负类.严格意义上,这种样本不平衡不是因为样本数量的问题,而是因为边界点发 ...

  2. 百度地图JS只显示一个省

    转载地址:http://www.cnblogs.com/wondergx/p/5305602.html 转载地址:https://blog.csdn.net/myfmyfmyfmyf/article/ ...

  3. jq 绑定事件和解绑事件

    <!DOCTYPE html><html><head> <script src="http://cdn.static.runoob.com/libs ...

  4. ViewpageMaiActity

    <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu ...

  5. 2018.4.27 python使用过的第三方库

    Flask flask-login flask-sqlalchemy flask-mail psutil lvm2py oss2 python-ldap pyudev pyOpenSSL urllib ...

  6. angular引用echarts插件

    方法一 1. 命令行下载 npm install echarts --savenpm install ngx-echarts --save 2. angular.json 配置echarts路径. 2 ...

  7. c#泛型TryParse类型转换

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...

  8. 面試題之web

    1. django和flask框架的区别? django:大而全的全的框架,重武器:内置很多组件:ORM.admin.Form.ModelForm.中间件.信号.缓存.csrf等 flask: 微型框 ...

  9. zabbix之 自动发现磁盘io util 监控

    一.iostat Zabbix并没有提供模板来监控磁盘的IO性能,所以我们需要自己来创建一个.iostat主要用于监控系统设备的IO负载情况,iostat首次运行时显示自系统启动开始的各项统计信息,之 ...

  10. 乐乐课堂_leleketang.com

    乐乐课堂_leleketang.com https://www.baidu.com/sf?pd=video_page&sign=12394301609542619800&word=抛物 ...