大家都知道，当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. [Java] 方法 -- 繼承關係

    public class test { void show() { System.out.println("父類別"); } } public class test2 extend ...

  2. PythonStudy——数据类型总结 Data type summary

    按存储空间的占用分(从低到高) 数字 字符串 集合:无序,即无序存索引相关信息,可变.集合中的元素必须是可hash的,即不可变的数据类型. 元组:有序,需要存索引相关信息,不可变 列表:有序,需要存索 ...

  3. java_lambda表达式

    lambda表达式1    由来    概念        是通过策略模式来曲线实现的    lambda表达式2    语法详解    lambda表达式3    目标类型的概念    目标类型推断 ...

  4. Eslint 能自动格式化代码，为什么还要用 Prettier？

    ESLint 与 Prettier 区别: ESLint:代码检测工具:可以检测出你代码中潜在的问题,比如使用了某个变量却忘记了定义: Prettier:代码格式化工具:作为代码格式化工具,能够统一你 ...

  5. C++笔记（1）

    C++笔记1文件与流笔记 参考博客: https://blog.csdn.net/kingstar158/article/details/6859379       关闭文件中: 当文件读写操作完成之 ...

  6. Unix/Linux进程间通信

    一,Linux下进程间通信的几种主要手段简介: 1,管道(Pipe)及有名管道(named pipe) 管道可用于具有亲缘关系进程间的通信 有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功 ...

  7. 防爆等级介绍 - IP65防爆等级和dIIBT4防爆等级的有什么区别？

    IP65 IP是Ingress Protection的缩写,IP等级是针对电气设备外壳对异物侵入的防护等级,如:防爆电器,防水防尘电器,来源是国际电工委员会的标准IEC 60529,这个标准在2004 ...

  8. 服务器tcp连接timewait过多优化及详细分析

    [背景说明] 在7层负载均衡上,查询网络状态发现timewait太多,于是开始准备优化事宜 整体的拓扑结构,前面是lvs做dr模式的4层负载均衡,后端使用(nginx.or haproxy)做7层负载 ...

  9. globals和locals的区别

    Python的两个内置函数,locals 和globals,它们提供了基于字典的访问局部和全局变量的方式. 1.locals()是只读的.globals()不是.这里说的只读,是值对于原有变量的只读. ...

  10. 洛谷P1443马的遍历

    传送 这是个广搜,思路和普通的迷宫题差不多,但我卡了3遍,为什么呢? 因为输出格式 题目要求左对齐,宽度为5输出,在此说一下如何控制宽度. 下面的m都为要求的宽度 int 类型: printf: %m ...