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">这是内 ...
随机推荐
- P2387 [NOI2014]魔法森林 LCT维护最小生成树
\(\color{#0066ff}{ 题目描述 }\) 为了得到书法大家的真传,小 E 同学下定决心去拜访住在魔法森林中的隐 士.魔法森林可以被看成一个包含 n 个节点 m 条边的无向图,节点标号为 ...
- LCA【洛谷P2971】 [USACO10HOL]牛的政治Cow Politics
P2971 [USACO10HOL]牛的政治Cow Politics 农夫约翰的奶牛住在N (2 <= N <= 200,000)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向 ...
- socket 中read返回0的情况
当client,调用read(socketfd,buffer,n)时,返回0的情况: 1.server端调用了close(soketfd)函数 2.server调用了close(fd,SHUT_WR) ...
- 7 . 动态sql-choose
choose-when-otherwise 只能满足一个when 中的条件,互斥的条件,不能同时存在 mapper.xml <select id="selectstateByTitle ...
- 老男孩python作业9-简单的商城页面布局
利用HTML相关知识编写下面的网页: 核心代码如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- poj3040 发工资（贪心）
题目传送门 题目大意:给一个人发工资,给出不同数量不同面额,(大面额一定是小面额的倍数),问最多能发几天,(每天实发工资>=应发工资). 思路:首先,将大于等于c的面额的钱直接每个星期给奶牛一张 ...
- 2015苏州大学ACM-ICPC集训队选拔赛（1） 1008
猪猪过河 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submissi ...
- lintcode - 恢复ip地址
class Solution { public: /* * @param s: the IP string * @return: All possible valid IP addresses */ ...
- redis 学习字符类型 hash
> HSET userinfo1 username "king" (integer) > HSET userinfo1 passowor " (integer ...
- win10下Anaconda3在虚拟环境python_version=3.5.3 中配置pyspark
1. 序经过了一天的修炼,深深被恶心了,在虚拟环境中配置pyspark花式报错,由于本人实在是不想卸载3.6版的python,所以硬刚了一天,终于摸清了配置方法,并且配置成功,不抱怨了,开讲: 2. ...