position:fixed相对父级元素定位而不是浏览器
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相对父级元素定位而不是浏览器的更多相关文章
- layer弹出层设置相对父级元素定位
layer弹出层默认是相对body固定定位的,可是项目中一般需要相对某个盒子相对定位,下面是个加载弹层例子: var loadIndex = layer.open({ type: 3, //3 表示加 ...
- html css样式子元素相对父级元素定位
废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.
- [jQuery]相对父级元素的fixed定位
(function($) { var DNG = {}; //----------------------------------------------------/ // ...
- position:fixed 相对父元素定位
position:fixed是对于浏览器窗口定位的,要实现相当于父元素定位,可以这样: 不设置fixed元素的top,bottom,left,right,只设置margin来实现. 这种方法本质上fi ...
- css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...
- jQuery使用（四）：DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- IE6 7 父级元素的overflow:hidden 是包不住子级的relative
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
- JQuery 获取父级元素、同级元素、子元素等
例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...
随机推荐
- 转载《centos6安装nginx最详细步骤》
出处:https://www.cnblogs.com/hltswd/p/6956264.html 第一步:在centos下面下载 nginx wget http://nginx.or ...
- XStream -- a simple library to serialize objects to XML and back again
Link :http://xstream.codehaus.org/index.html http://www.cnblogs.com/hoojo/archive/2011/04/22/2025197 ...
- HTML的知识点讲解（HTML版本）
老男孩培训机构老师的博客 1.html 2.css http://www.cnblogs.com/yuanchenqi/articles/6856399.html 3.javas ...
- git push fatal: HttpRequestException encountered
原因: github禁用了TLS1.0/1.1协议 截至2018年2月22日,GitHub禁用了对弱加密的支持,这意味着许多用户会突然发现自己无法使用Git for Windows进行身份验证(影响版 ...
- H - 逆序数（树状数组）
在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数. 如2 4 3 1中,2 1,4 3,4 1,3 1是逆序 ...
- 金融量化之tushare模块的使用
一.TuShare简介和环境安装 TuShare是一个著名的免费.开源的python财经数据接口包.其官网主页为:TuShare -财经数据接口包.该接口包如今提供了大量的金融数据,涵盖了股票.基本面 ...
- vue-踩过的坑
1)引入组件时路径一定要是./ or ../开头 import Goback from './public/goback.vue' 2)这类输入框绑定的值不是:value 不是 :value 不然数据 ...
- 关于Yii2中的MVC中的视图总结（持续更新中）
一.首先在控制器中,将处理好的数据发送给前台: $this->layout = 'base'; 这里填写视图的模板文件(可以不写这行代码,如果不写,默认为views/layouts/main.p ...
- 【ACM】阶乘因式分解（二）
阶乘因式分解(二) 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 给定两个数n,m,其中m是一个素数. 将n(0<=n<=2^31)的阶乘分解质因数,求 ...
- Dotfuscator 的使用方法
打开Dotfuscator工具,选择“Create New Project” 在Input选项中选择需要混淆的文件 把 Disable String Encryption 设为 NO,即启用字符串加密 ...