css定位position属性深究
1.static:对象遵循常规流。此时4个定位偏移属性不会被应用。

2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
3.absolute:对象脱离常规流,此时偏移属性参照的是离自身最近的定位祖先元素,如果没有定位的祖先元素,则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素,其margin不与其他任何margin折叠。(于是有了父相对,子绝对的套路)

4.fixed:与absolute一致,但偏移定位是以窗口为参考。当出现滚动条时,对象不会随着滚动。

5.sticky:对象在常态时遵循常规流。它就像是relative和fixed的合体,当在屏幕中时按常规流排版,当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。(CSS3)

总结:定位属性的用法具体大致就这么多,参考css手册总结的。
center:与absolute一致,但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。(CSS3)
page:与absolute一致。元素在分页媒体或者区域块内,元素的包含块始终是初始包含块,否则取决于每个absolute模式。(CSS3)
position:static | relative | absolute | fixed | center | page | sticky(center,page 与absolute一致,后面三个为css3属性)
1.当position的值为非static时,其层叠级别通过z-index属性定义。
2.绝对定位的元素,在top,right,bottom,left属性未设置时,会紧随在其前面的兄弟元素之后,但在位置上不影响常规流中的任何元素。
css定位position属性深究的更多相关文章
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- CSS中Position属性static、absolute、fixed、relative
在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示 CSS中Position属性有四个可选值,它们分别是:static.absolute.fixed.rel ...
- 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html
深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...
- 定位--position属性
一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) ...
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
随机推荐
- 打造字符界面的多媒体Linux系统
0 环境与目标 硬件:ThinkPad R52笔记本一台. 目标:字符界面的Linux系统,同时可以看图片,听音乐,看视频,无线上网,重要的是可以听着音乐编程了! 注意:本文打造的系统主要是供一个工程 ...
- EJB3.0
由于EJB2.0的复杂性,在Spring和Hibernate[1] 等轻量级框架出现后,大量的用户转向应用轻量级框架.在大家的呼声中, EJB 期待已久的EJB3.0规范终于发布了.在本文中将对新的 ...
- 在Android用ZXing.jar识别二维码的精简版(简化了配置和代码)
近期公司做了一款OTP令牌激活的产品,因为之前激活手机令牌须要输入非常多的激活信息才干进行激活. 经过一段使用后,发现易用性不是非常强,考虑假设添加二维码的的扫码功能岂不是大大添加了易 ...
- 关于树论【LCA树上倍增算法】
补了一发LCA,表示这东西表面上好像简单,但是细节真挺多. 我学的是树上倍增,倍增思想很有趣~~(爸爸的爸爸叫奶奶.偶不,爷爷)有一个跟st表非常类似的东西,f[i][j]表示j的第2^i的祖先,就是 ...
- DWR(Direct Web Remoting)是什么
DWR可以用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助你开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一 ...
- 【黑金教程笔记之002】【建模篇】【Lab 01 永远的流水灯】—笔记&勘误
学习并行操作的思想. 勘误001: Page 17,模块图下方,“扫描频配置定为100Hz”应为10Hz. 勘误002: Page 17,最后一行 “10ms”应为100ms:“2.5ms”应为25m ...
- E20180318-hm
Scalability 可扩展性 scale n. 规模; 比例(尺); 鱼鳞; 级别; vt. 测量; 攀登; 刮去…的鳞片; vi. 衡量; 攀登; (鳞屑) 脱落; 生水垢; collabor ...
- bzoj 4816: [Sdoi2017]数字表格【莫比乌斯反演+逆元】
把题意简化,就是要求 \[ \prod_{d=1}^{min(n,m)}f[d]^{\sum_{i=1}^{n}\sum_{j=1}^{m}e[gcd(i,j)==d]} \] 把幂用莫比乌斯反演转化 ...
- bzoj1483: [HNOI2009]梦幻布丁(vector+启发式合并)
1483: [HNOI2009]梦幻布丁 Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 4022 Solved: 1640[Submit][Statu ...
- hdu 1178 Heritage from father (推导)
题意: 有一个金币堆的金字塔,最上层就有一个金币,以后的i层都是边长为i的实心三角形,给你层数,问:一共有多少个金币?(用科学计数法表示,并且保留两位小数) 解题思路: 根据题意可知求出1*n+2*( ...