定位--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: 相对父 ...
随机推荐
- Windows系统操作指令汇总
CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统版本) 1. appwiz.cpl:程序和功能 2. calc:启动计算器 3. certmgr ...
- 为何PS出的RSS总和大于实际物理内存
使用ps aux 查看系统进程时,第六列即 RSS列显示的就是进程使用的物理内存. 可是把系统所有进程的该列相加时,得到的总和又远远高于系统实际的物理内存?这到底是怎么回事呢? 看一看linux是 ...
- C++随机数rand(), srand()
c++产生随机数会用到rand(), srand()函数,下面总结两个函数特性和使用. 1. rand() #include <iostream> #include <cstdlib ...
- ZJOI2017 Round#2 滚粗记
在杭州的火车站的KFC餐厅里,独自一人,闲来无事,便写写这篇博客.刚刚的一个礼拜,经历了余姚的省选和杭州的数学集训,感觉有些浪,学校里现在还在上新课,我已经落下一个礼拜的文化课了,回去估计补死:最重要 ...
- SDN学习之Mininet验证OpenFlow协议版本
最近学习如何使用mininet,但是,刚刚开始时一直无法知道如何查看OpenFlow协议的版本,通过查阅网上的资料,从SDNLAB中,学习到了如何验证,mininet自身基于OpenFlow13版本的 ...
- jQuery css操作
jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: <div id="div" style="width:200px;height:200p ...
- Spring Boot 之构建Hello Word项目
1.创建一个maven项目 如下步骤: (第一步) (第二步) (第三步) 2.配置pom.xml文件 加载一些依赖包.字符集.指定jdk.编译插件. <project xmlns=" ...
- 转:Redis 配置为 Service 系统服务
在Linux中,将程序配置为服务后,就可以使用service命令对系统服务进行管理,如:start(启动).stop(停止).restart(重启)等.Redis安装后默认不会配置为系统服务,本文将介 ...
- 使用configuration配置结束在quartz.net中使用硬编码Job,Trigger任务提高灵活性
经常在项目中遇到定时任务的时候,通常第一个想到的是Timer定时器,但是这玩意功能太弱鸡,实际上通常采用的是专业化的第三方调度框架,比如说 Quartz,它具有功能强大和应用的灵活性,我想使用过的人都 ...
- shiro权限控制(一):shiro介绍以及整合SSM框架
shiro安全框架是目前为止作为登录注册最常用的框架,因为它十分的强大简单,提供了认证.授权.加密和会话管理等功能 . shiro能做什么? 认证:验证用户的身份 授权:对用户执行访问控制:判断用户是 ...