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. postgresql 如何设置主键自增

    法一: CREATE TABLE customers ( customerid SERIAL primary key , companyname character varying, contactn ...

  2. 机器学习--最邻近规则分类KNN算法

    理论学习: 3. 算法详述        3.1 步骤:      为了判断未知实例的类别,以所有已知类别的实例作为参照      选择参数K      计算未知实例与所有已知实例的距离      选 ...

  3. P3970 [TJOI2014]上升子序列

    传送门 DP 十分显然的DP,但是不好写 设 f[ i ] 表示以第 i 个数作结尾时的方案数,原序列为 a 如果不考虑相同的序列: 那么转移就是 Σ f[ j ] (0< j < i & ...

  4. codeforces-984D——XOR-pyramid（DP）

    题目传送门 题目描述:给你一个f函数,这个函数的自变量是一个数列,函数表达式就是题目所给的描述,然后给你一个数列,问你数列中某区间  怎么选取 可以使函数值最大. 题目思路:  有关区间选取的问题,很 ...

  5. day17 isinstance type issubclass 反射

    1. issubclass,type,isinstance 1.issubclass 判断xxx是否yyy的子类 例: class Foo: pass class Bar(Foo): pass cla ...

  6. Go语言基础之11--Goroutine

    一.创建goroutine 1)在go语言中,每一个并发的执行单元叫做一个goroutine: 2)当一个程序启动时,其主函数即在一个单独的goroutine中运行,一般这个goroutine是主go ...

  7. Linux内核模块简单示例

    1. Linux 内核的整体结构非常庞大,其包含的组件也非常多,使用这些组件的方法有两种: ① 直接编译进内核文件,即zImage或者bzImage(问题:占用内存过多) ② 动态添加 * 模块本身并 ...

  8. python3 rjust()函数笔记

    #rjust(12,'l')"12是字符串的长度,l是当字符串不够长的时候,用l填充.并且字符串右对齐".返回一个原字符串右对齐,并使用空格填充至长度 width 的新字符串.如果 ...

  9. Photoshop入门教程（三）：图层

    学习心得:图层可以说是Photoshop的核心,看似简单,但是对于图像的各种编辑都是基于图层.他就像一层透明的.没有厚度的玻璃纸,每张玻璃纸设置不同的效果,层层叠加,最后显现出绚烂的效果. 在进行图像 ...

  10. 1 Groovy

    1.1  什么是Groovy? groovy 是一个弱类型,动态语言,并且运行在JVM之上.它与java联系紧密.它是一个功能丰富和友好的java语言. Groovy源代码,通过Groovy编译器编译 ...