定位--position属性
一.定位--position属性
1.static:默认值 没有定位--以标准文档流方式显示
2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom)
3.absolute:绝对定位
4.fixed:固定定位
二.相对定位元素的规律
1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置
2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响
三.绝对定位-- absolute属性
1.偏移位置:left right top bottom
2.使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移,
如果没有已近定位的“祖先元素”那么会以为浏览器为基准进行偏移
3.绝对定位的元素从标准文档流中脱离,这意味着它们对其他元素的定位不会造成影响
4.绝对定位不设置偏移量元素将保持原来的位置,但脱离标准文档流
四.调整元素定位重叠层的上下位置
1.z-infex属性值:整数默认值为0
2.设置position属性时z-iindex属性可以设置各元素之间的重叠高低关系
3.z-index值大的层位于其小的层上方
定位--position属性的更多相关文章
- 总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- css定位position属性深究
1.static:对象遵循常规流.此时4个定位偏移属性不会被应用. 2.relative:对象遵循常规流,并且参照自身在常规流中的位置通过top,right,bottom,left这4个定位偏移属性进 ...
- 前端定位Position属性四个值
1.static(静态定位):默认值.没有定位,元素出现在正常的流中. 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常(原先本身 ...
- [转载]CSS元素的定位position
CSS元素的定位position 属性position 值 描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一 ...
- CSS笔记(十)position属性与定位
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp position属性规定了元素的定位类型.任何元素都可定位,其中,绝对或固定元素会 ...
- 总结·CSS3中定位模型之position属性的使用方法
一.position元素介绍 position属性规定了元素的定位类型,通过定位,可准确地定义元素相对于其正常位置而应该出现的位置,或者是相对于父元素.另一元素和浏览器窗口等的位置. position ...
- CSS 定位相关属性 :position
我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...
随机推荐
- Linux - PCB之task_struct结构体
task_struct结构描述 1. 进程状态(State) 进程执行时,它会根据具体情况改变状态 .进程状态是调度和对换的依据.Linux中的进程主要有如下状态,如表4.1所示. 内核表示 含义 ...
- [No0000E9]Microsoft Help Viewer 2.3绿色版
今天没事,提取了一下2017的Microsoft Help Viewer 2.3绿色版,自测没发现什么问题,有问题请后补. 下载地址:http://files.cnblogs.com/files/Ch ...
- DirectFB 之 FillRectangle 绘制矩形
1. 函数原型解析 函数声明: DFBResult FillRectangle ( IDirectFBSurface * thiz, int x, int ...
- ajax从新浪获取实时股票数据
最近在给公司做一个报表展示,然后领导要求上面加上一些股票的实时数据展示. 一开始同事给我一个聚合数据的网址,说从这上面可以获取到.我一看,哟呵,API接口什么的都提供好了,确实方便.然后想用的时候才发 ...
- vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
- 关于IT创业和反思
2016年8月的某一天本是世上平凡的一天,对于我而言却并不平凡. 这一天,我离开了待了近四年的创业公司.从它成立前的筹备开始,伴随着它的起起伏伏到完成C轮融资,从来没想过以这种方式离开,然而人生总是充 ...
- zabbix_server表面启动成功,但是没有进程
[root@iZ25m1box8cZ zabbix]# /etc/init.d/zabbix_server start Starting zabbix_server (via systemctl): ...
- javascript 中 with 的使用
1)简要说明 with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象. 2)语法格式 with(object ...
- SOM网络聚类完整示例(利用python和java)
下面是几个城市的GDP等信息,根据这些信息,写一个SOM网络,使之对下面城市进行聚类.并且,将结果画在一个二维平面上. //表1中,X.为人均GDP(元):X2为工业总产值(亿元):X.为社会消费品零 ...
- hdu3709 Balanced Number 数位DP
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题目大意就是求给定区间内的平衡数的个数 要明白一点:对于一个给定的数,假设其位数为n,那么可以有 ...