大家都知道，当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. vue调用支付接口

    html: <div class="paymentHtml" v-html="paymentHtml"></div> script: d ...

  2. Docker常用命令（四）

    通过一些例子来了解基本的命令使用   1.查看docker信息       docker info         2.安装完Docker后,里面还有任何镜像,先从仓库下载一个基础镜像,然后在这个基础 ...

  3. css 样式控制文本过长实现省略号

    css 样式控制文本过长实现省略号 .topicTitle{ text-overflow: ellipsis; max-width: 75%; overflow: hidden; white-spac ...

  4. linux nodejs

    scp node-v8.15.0-linux-x64.tar.gz root@10.88.248.231:/lngoa tar -zxvf node-v8.15.0-linux-x64.tar.gz ...

  5. 承接AR定制AR项目外包（正规公司，内附案例）

    京团队长年承接AR项目外包 咨询QQ:372900288  微信:liuxiang0884 以下是AR项目案例演示,索取更多案例请通过以上方式在线联系我们

  6. nodejs教程 安装express及配置app.js文件的详细步骤

    来自:http://www.jb51.net/article/36710.htm   express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板.下面简单来说说express的 ...

  7. react学习笔记1一基础知识

    1.React 是一个用于构建用户界面的 JAVASCRIPT 库2.React 特点: a.声明式的设计 b.采用虚拟dom,最大限度的减少dom操作 C.组件化,可以复用 D.单向响应的数据流,减 ...

  8. PCL数据类型和ROS数据类型的转换

    参考网址 http://wiki.ros.org/pcl/Overview ,重点参看第2和第3节. 1. Data types 介绍了三种点云数据类型:sensor_msgs::PointCloud ...

  9. CLOSE_WAIT状态的原因与解决方法

    https://blog.csdn.net/Windgs_YF/article/details/83513696 netstat -nat|awk '{print $6}'|sort|uniq -c| ...

  10. [UE4]RichTextBlock

    RichTextBlock:富文本 一.新建一个名为“TestRichTextBlock_0”的UserWidget,并添加名为RichTextBlock_0的RichTextBlock控件,并设置T ...