大家都知道，当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. Spring Boot 非常好的学习资料

    from@https://gitee.com/didispace/SpringBoot-Learning Spring Boot 2.0 新特性学习 简介与概览 Spring Boot 2.0 正式发 ...

  2. String 与 StringBuffer的差别

    原文:http://blog.csdn.net/yirentianran/article/details/2871417 在Java中有3个类来负责字符的操作. 1.Character 是进行单个字符 ...

  3. (思维导图搞定)Content-Type：application/json，后台如何接收

    自己定的规范:只要Content-Type设置为application/json的时候,前台的data要传递字符串 虽然设置为application/json,前台传对象request.getPara ...

  4. iso系统镜像刻录到光盘和U盘

    使用UltraISO刻录 刻录U盘,点击文件,打开,选择镜像 启动,写入硬盘镜像选择U盘即可 刻录光盘 工具,刻录光盘映像,选择镜像,需要先插入光盘刻录机(有些电脑可能自带光驱盘,且有刻录功能,那么我 ...

  5. IETF和W3C的区别

    国际互联网协会ISOC和万维网联盟W3C是互联网领域内两大国际协会组织,ISOC旗下IETF机构与W3C是互联网行业内两大标准组织.不可否认「IETF和W3C都是优秀的组织,它们从事着一种使事情按程序 ...

  6. exactly-once和kafka

    Exactly-Once的概念是指"恰好一次",简单讲就是同一个数据只会被处理一次,应用有机质保证不会重复处理同一条数据(如果数据因为因为网络业务异常被发送多次):Exactly- ...

  7. shell 生成MAC地址

    # cat /dev/urandom |od -x |awk '{print $2,$3,$4}' |head -n 1 |sed -e 's/[[:space:]]//g' -e 's/\(..\) ...

  8. SVN 撤回已提交的代码

    1. TortoiseSVN -----> Show log 2.右键点击你想撤回的提交 -> Revert changes from this revision ----->Rev ...

  9. spring @Autowired注入对象，在构造方法中为null问题

    出现问题的代码如下: @Service public class BaseHttpServiceImpl implements BaseHttpClient { private final stati ...

  10. Delphi XE4 For IOS之部署问题

    在XE4中编写完程序后,怎么把相应的文件部署到ios虚拟机和真实机子中呢?下面就来说说. 首先选择你要部署的项目,选择Project->Deployment菜单 Deployment菜单打开如下 ...