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. ajax遍历数据生成下拉框

    <script type="text/javascript">        function GetEQIDList(ModuleID)    {        $. ...

  2. C++基础学习10：继承

    继承是类与类之间的关系,是一个很简单很直观的概念,与现实世界中的继承(例如儿子继承父亲财产)类似. 继承可以理解为一个类从另一个类获取方法(函数)和属性(成员变量)的过程.如果类B继承于类A,那么B就 ...

  3. Gym - 101845F 最大流

    The UN finals are here!, the coaches/ex-coaches team is creating a new exciting contest to select wh ...

  4. [SCOI2010]序列操作 BZOJ1858 线段树

    题目描述 lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 1 a b ...

  5. 小程序渲染问题:ios显示安卓不显示

    问题描述: 测试库转到正式库后添加数据,小程序数据渲染不出来,但是测试库没问题,ios数据能显示,没问题,但是安卓显示没数据. 排除是服务器https证书问题,如果是证书问题,小程序会直接调不了接口. ...

  6. maven 中 指定jdk 和 编译编码，仓库位置

    <!-- 配置编译选项 --> <profile> <id>jdk1.8</id> <activation> <activeByDef ...

  7. Luogu P5201 [USACO19JAN]Shortcut 最短路树？？？

    最短路树...开眼界了...之前想也没想过.... 先跑出来1到每个点最短路,然后建树时要标记点的入度,否则会多连边...然后深搜时更新新答案就是 #include<cstdio> #in ...

  8. 1065. A+B and C (64bit) (20)

    Given three integers A, B and C in [-263, 263], you are supposed to tell whether A+B > C. Input S ...

  9. Java的Protected

    没想到接触Java这么多年,今天竟然才发现一直有一个误解 Proteced只能被同一个包内的或者子类的class访问 那么在另一个包的如下代码有问题吗? Sub sub = new Sub(); su ...

  10. my19_mysql 多线程备份恢复工具mydumper

    mydumper适合库中有大表且CPU个数较多的场景,多用于恢复从库或单个实例 推荐用法**************************** mydumper -u automng -p root ...