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. 模板 可并堆【洛谷P3377】 【模板】左偏树（可并堆）

    P3377 [模板]左偏树(可并堆) 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删 ...

  2. Hbase0.98.0完全分布式搭建---【使用外部zookeeper】

    Hbase是一个分布式的实时数据库,他可以基于hadoop的hdfs,S3等分布式存储系统.而且使用zookeeper来通信(查询元数据和获取数据所在位置等功能) 本文的Hbase使用的是hadoop ...

  3. 让函数的input、output更"函数化"

    前言 我们都知道函数的基本形式为:output f(input),且先按这种形式进行input与output的分析,我们的input与output可以有更好的设计方式,而我们的output是选择使用r ...

  4. P4332 [SHOI2014]三叉神经树(LCT)

    Luogu4332 LOJ2187 题解 代码-Tea 题意 : 每个点有三个儿子 , 给定叶节点的权值\(0\)或\(1\)且支持修改 , 非叶子节点的权值为当有\(>=2\)个儿子的权值为\ ...

  5. CF 给你三个数字L, R, K，问在[L, R]范围内有多少个数字满足它每一位不同数字不超过k个，求出它们的和（数位DP）

    题意: 给你三个数字L, R, K,问在[L, R]范围内有多少个数字满足它每一位不同数字不超过k个,求出它们的和 分析:考虑用状态压缩 , 10给位0~9 , 如果之前出现过了某个数字x ,那就拿当 ...

  6. 斑马打印机客户端GET和POST，以及后端两种打印方式。

    斑马打印机客户端GET和POST,以及后端两种打印方式. 背景环境:打印机安装在客户端外网.当用户登录时,通过ajax取服务器数据,返回打印机命令,然后客户端通过JS发送给斑马打印机. 1.使用Get ...

  7. formValidation校验

    引用: https://www.cnblogs.com/aliger/p/3898216.html

  8. 浅谈soa之RESTful

    今晚打算花点时间整理一下面向服务的架构oap.1传统中小型项目架构一般是这样的:(java)html+servlet+jdbc.和(.net)html+handler+ado.net都是在一台应用来. ...

  9. PlayMaker Destroy Self 和 Destroy Object 和 Set Visibility

    1. 这个销毁是销毁状态机所在的游戏物体,不能销毁父物体. 2. 这个销毁只要把想销毁的游戏物体拖进去就可以. 3. 这个其实不是真正的销毁游戏对象,只是把它的 MeshRenderer 组件关上了, ...

  10. 数据库mysql基础语言--各模式的含义

    1. 欢迎信息 欢迎来到 MySQL 镜像.命令以 ; 或 g 结束.你的 MySQL 连接编号为 2.服务器版本:5.1.47-社区 MySQL 社区服务器(GPL) 版权(C)2000.2010, ...