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. 读经典——《CLR via C#》(Jeffrey Richter著) 笔记_基元类型（三）

    [checked 和 unchecked 基元类型操作] 1.第一种使用方式 UInt32 invalid = )); //OK,不会抛异常 Byte b = ; b = ));//抛出Overflo ...

  2. linux服务器后台运行程序

    让程序脱离终端单独运行 nohub ... & 重新连接ssh后,ps ux 可以查看所有后台程序

  3. The MathType DLL cannot be found 一劳永逸的方法

    可能会看到下面的情况,然后实际上我们也能用过外部打开直接使用,那要你何用? 于是,我们找到这个文件,删除就OK 反正我写完论文就卸载了...

  4. python--selectors模块

    它的功能与linux的epoll,还是select模块,poll等类似:实现高效的I/O multiplexing,  常用于非阻塞的socket的编程中: 简单介绍一下这个模块,更多内容查看 pyt ...

  5. django 母版与继承

    在子页面的页面最上方使用下面的语法来继承母版. {% extends 'layouts.html' %} 块: 通过在母版中使用{% block xxx %}来定义块.在子页面中通过定义母版中的blo ...

  6. springmvc怎么重定向

    转载大神: https://blog.csdn.net/wabiaozia/article/details/50252661

  7. sf03_杨辉三角go实现

    package main import "fmt" /* 变量规范 全局变量以v_为前缀 函数形参以p_为前缀 函数内部变量,字母数字下划线等普通组合,其中函数返回值以out_为前 ...

  8. 使用nrm解决npm下载包慢的问题！

    nrm的安装使用 作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址: 什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候 ...

  9. Notepad++实用插件

    说明: Converter: 编码转换工具,ascii2hex,hex2ascii DoxyIt: 添加文件或者函数注释比较方便 DSpellCheck: 拼写检查 MIME Tools: 将Base ...

  10. Mybatis学习笔记12 - 动态sql之choose(when otherwise)标签

    choose (when, otherwise):分支选择:带了break的swtich-case 示例代码: 接口定义: package com.mybatis.dao; import com.my ...