大家都知道，当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. # 20175120 2018.3.3 《Java程序设计》第1周学习总结

    ## 教材学习内容总结 1.安装ubuntu,在实验楼学习liunx系统各种功能的实现.2.在ubuntu平台上进行java程序的编写3.学会使用JDB调试java程序,并将代码上传到码云上4.学习j ...

  2. HDU 2062：Subset sequence（思维）

    Subset sequence Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  3. CIFAR-10数据集读取

    参考:https://jingyan.baidu.com/article/656db9183296c7e381249cf4.html 1.使用读取方式pickle def unpickle(file) ...

  4. form表单以及内嵌框架标签

    今关于今天所学习的东西又复杂又简单,上午学习了form表单,也是挺简单的:搭配table表格使用也是非常熟练. 下午讲了讲给网页内嵌框架标签以及在内嵌框架标签中添加其他的网页:还有在内嵌框架标签中添加 ...

  5. H5入门须知

    ---恢复内容开始--- 首先,让我们来了解一下H5是做什么的,H5全称为“超文本标记语言”.是对网页进行编辑的技术.H5运用Hbulider进行网页编辑.网页可以分为三部分分别是title(主题)u ...

  6. win32网络模型之重叠I/O

    网上大部分重叠I/O的基本概念都讲得很清楚,但是大多讲得不是很深入,实际用起来很多问题.这里只对完成实例的通知进行讨论,对问题进行总结. 重叠IO异步读写后,在某一时刻"完成"后会 ...

  7. winform中devexpress bindcommand无效的解决方法

    正常绑定,编译运行无报错,但无法执行command fluentAPI.BindCommand(commandButton, (x, p) => x.DoSomething(p), x => ...

  8. ubuntu18.04 apt-get换国内源 阿里源 163源 清华源 中科大源

    服务器上安装了最新的Ubuntu Server 18.04,代号为bionic.使用apt-get命令安装软件时,有时候速度比较慢,有时候会失败.因此考虑用国内的镜像源更换下apt-get的默认源. ...

  9. ubuntu12.04 64bit libncurses5-dev和libncurses5-dev:i386共存性问题讨论

    ubuntu12.04 64bit 编译kernel(或者make menuconfig)源码时出现如下错误: HOSTLD scripts/kconfig/mconf scripts/kconfig ...

  10. JavaBean是什么，POJO是什么

    参考:https://stackoverflow.com/questions/3295496/what-is-a-javabean-exactly https://stackoverflow.com/ ...