定位--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: 相对父 ...
随机推荐
- Android中调用文件管理器并返回选中文件的路径
实际项目中经常需要调用文件管理器,选择下载路径或者上传的本地文件路径.今天就给大家做个demo示范该功能的实现过程. 一.实现效果预览 以下为三星S6的样机测试效果,当然不同手机调用后的效果不一样. ...
- (练习题)利用构造器函数实现三个小实例——不使用String()与Array()构造器和Math对象,不使用内建的方法的方法和属性。
1)在String()构造器不存在的情况下自定义一个myString()构造器函数.由于String()不存在,因此您在写构造器函数时不能使用任何属于内建String对象的方法和属性.并让你所创建的对 ...
- CSS vertical-align属性
之前也经常用到vertical-align进行垂直居中对齐,突然发现其中的一些属性值根本就没使用过,也不清楚效果,将今天的研究成果记录下. vertical-align 属性 下表是w3c上列举的属性 ...
- 如何运行一个vue工程
在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家. 首先, ...
- Spring Cloud 学习笔记(二)——Netflix
4 Spring Cloud Netflix Spring Cloud 通过自动配置和绑定到Spring环境和其他Spring编程模型惯例,为Spring Boot应用程序提供Netflix OSS集 ...
- MarkDown本地图片上传工具制作总结
引言:开始尝试使用MarkDown语法写文档,发现图片必须用外链的形式才能插入到文章中,而自己平时最常用的插入图片方式就是QQ截屏,觉得很不方便所以制作的小工具辅助上传,因为时间和水平有限,其实代码写 ...
- QQ互联第三方登陆 redirect uri is illegal(100010)
想必第一次大家接触QQ第三方登陆都会遇到各种各样的问题,备受折磨,因此,今天我把自己做QQ登陆的过程描述一下,希望给大家提供参考,少走弯路. 在开发之前,我们先了解下QQ登陆的流程 第一:查看熟悉 网 ...
- 【初识Python】
一.Python的简介 1.什么是python? Python(发音:[ 'paiθ(ə)n; (US) 'paiθɔn ]),是一种面向对象的解释性的计算机程序设计语言,也是一种功能强大而完善的通用 ...
- MFC基础程序设计VS2015 最新02
视频教程地址观看:http://pan.baidu.com/s/1mhKQ6kK 对于每个函数的帮助资料都应该详细阅读:a)简要说明:能够快速了解函数的功能:b)参数:每一个参数的功能都应该了解它的含 ...
- RabbitMQ学习3----运行和管理RabbitMQ
1.服务为管理 Erlang天生就是为了让应用程序无需知道对方是否存在同一台机器上即可互相通信. Erlang节点:Erlang虚拟机的每个实例.多个Erlang应用程序可以运行在同一个节点之上.节点 ...