position:fixed默认是相对浏览器定位的

原理：fixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位

代码：http://jsbin.com/tegodideyi/edit?html,css,output

HTML布局：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="father">

    <div class="son">

      fixed定位相对父级容器定位，不添加:top,bottom,left,right样式,通过margin定位

    </div>

  </div>

  <p>a</p>

  <p>b</p>

  <p>c</p>

  <p>d</p>

  <p>e</p>

  <p>f</p>

  <p>g</p>

  <p>h</p>

  <p>i</p>

  <p>j</p>

  <p>k</p>

  <p>l</p>

  <p>m</p>

  <p>n</p>

  <p>o</p>

  <p>p</p>

</body>

</html>

CSS样式：

.father {

  width:300px;

  height:300px;

  background:green;

}

.son {

  position:fixed;

  margin-top: 40px;

  width:150px;

  height:150px;

  background:red;

  word-break: break-all;

}

结果：

未滚动时：

滚动后：

position:fixed相对父级元素定位而不是浏览器的更多相关文章

  1. layer弹出层设置相对父级元素定位

    layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...

  2. html css样式子元素相对父级元素定位

    废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.

  3. [jQuery]相对父级元素的fixed定位

    (function($) {     var DNG = {};     //----------------------------------------------------/     // ...

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

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

  5. css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

  6. jQuery使用（四）：DOM操作之查找兄弟元素和父级元素

    查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...

  7. IE6 7 父级元素的overflow:hidden 是包不住子级的relative

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  9. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

随机推荐

  1. 10.17(山东多校联合模拟赛 day1)

    山东多校联合模拟赛 day1 题不难 rect [问题描述] 给出圆周上的 N 个点, 请你计算出以这些点中的任意四个为四个角,能构成多少个矩形. 点的坐标是这样描述的, 给定一个数组 v[1..N] ...

  2. springboot整合dubbo注解方式(四)

    在笔者换jar包时候出现问题: Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/zook ...

  3. Qt 学习之路 2（19）：事件的接受与忽略

    Home / Qt 学习之路 2 / Qt 学习之路 2(19):事件的接受与忽略 Qt 学习之路 2(19):事件的接受与忽略  豆子  2012年9月29日  Qt 学习之路 2  140条评论 ...

  4. composer.json 配置设置

    配置文件的值为 key:val 必须双引号包裹 一.配置文件 名字 name包名称由用户名名称和仓库名称组成包版本限制来请求Monolog软件包 1.0.*.这意味着1.0开发分支中的任何版本,或大于 ...

  5. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_高级管理控制（配置）

    一个应用程序的XML配置文件示例: <?xml version="1.0"?> <configuration> <runtime> <as ...

  6. 【Effective Java】阅读

    Java写了很多年,很惭愧,直到最近才读了这本经典之作<Effective Java>,按自己的理解总结下,有些可能还不够深刻 一.Creating and Destroying Obje ...

  7. 理解 Spring 事务原理

    转载:https://www.jianshu.com/p/4312162b1458 一.事务的基本原理 Spring事务的本质其实就是数据库对事务的支持,没有数据库的事务支持,spring是无法提供事 ...

  8. 提取SQL中用到的表

    dos2unix * for i in `ls` do :}` awk '{print tolower($0)}' "${i}"|grep -Eiw "from" ...

  9. oracle数据库代码块

    --申明变量.游标 declare a ):'; --逻辑 begin INSERT into TEMP_DSF.TEST VALUES (a); end; tips:mysql不支持匿名块.仅在存储 ...

  10. 所有节点配置NTP服务

    主节点: 打开vim /etc/ntp.conf文件 For more information about this file, see the man pages # ntp.conf(), ntp ...