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">这是内 ...
随机推荐
- html之表单和简单CSS
一.==表单== 1. form表单本身 <form name="myform" action="#" method="get"> ...
- Python学习之路--1.0 Python概述及基本数据类型
Python是一门解释性语言,弱类型语言 python程序的两种编写方式: 1.进入cmd控制台,输入python进入编辑模式,即可直接编写python程序 2.在.朋友文件中编写python代码,通 ...
- Super-Resolution Restoration of MISR Images Using the UCL MAGiGAN System 超分辨率恢复
作者是伦敦大学学院Mullard空间科学实验室成像组,之前做过对火星图像的分辨率增强. 文章用了许多的图像处理方法获得特征和高分辨率的中间结果,最后用一个生产对抗网络获得更好的高分辨率结果. 用的数据 ...
- Qt 学习之路 2（24）：Qt 绘制系统简介
Qt 学习之路 2(24):Qt 绘制系统简介 豆子 2012年10月30日 Qt 学习之路 2 77条评论 Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制.整个绘图系统基于Q ...
- H5切换至后台页面
先说重点,试了很多种方法,这个真实有效 var reLoadLeftTime = false ;//监听浏览器当前页面是否被激活的事件var hiddenProperty = 'hidden' in ...
- hdu4081 秦始皇修路（次小生成树）
题目ID:hdu4081 秦始皇修路 题目链接:点击打开链接 题目大意:给你若干个坐标,每个坐标表示一个城市,每个城市有若干个人,现在要修路,即建一个生成树,然后有一个魔法师可以免费造路(不消耗人 ...
- 2015苏州大学ACM-ICPC集训队选拔赛（1） 1006
取金币 Time Limit : 3000/1000ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Total Submissio ...
- Go语言基础之1--标识符、关键字、变量和常量、数据类型、Go的基本程序结构、Golang的特性
一.前言 当我们项目较为简单时,我们在src目录下新建一个该项目目录,里面存放源码文件即可,见下图: 当我们一个项目较为复杂时,我们可以在src目录下新建一个该项目目录,在针对该项目不同模块创建不同目 ...
- Android + Appium 自动化测试完整的环境配置及代码详解
环境的的搭建 参考大神博客:https://www.cnblogs.com/fnng/p/4540731.html 该博客有一套详细的入门教程,奈何时间有点久远有些东西不能用了,但是参考价值还是有滴. ...
- Nmap工具使用
Nmap是一款网络扫描和主机检测的非常有用的工具. Nmap是不局限于仅仅收集信息和枚举,同时可以用来作为一个漏洞探测器或安全扫描器.它可以适用于winodws,linux,mac等操作系统.Nmap ...