定位position详解:relative与absolute
定位标签:position
包含属性:relative(相对) absolute(绝对)
1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上。然后通过设置垂直或水平位置,让这个元素”相对于”它的原始起点进行移动。(再一点,相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其他框)
相对定位:relative 没有脱离正常的文档流,被设置元素相对于其原始位置而进行定位,其原始占位信息仍存在
2.position:absolute; 表示绝对定位,位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流,因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。(因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高,它显示的越在上层。)
绝对定位:ablution 脱离了文档流与浮动模型,独立于其他对象而存在,没有占位。
3.父容器使用相对定位,子元素使用绝对定位后,这样子元素的位置不再相对于浏览器左上角,而是相对于父窗口左上角
下面具体案例说明:
1。若c嵌套在b中,且b,c均是相对定位,则c的相对定位是相对于b而言的,b保留占位信息,且b中保留c的占位信息。
2。若c嵌套在b中,b进行绝对定位,c进行相对定位,则b脱离浮动,没有占位信息,而c相对b定位,并在b中发生占位。
3。若a,b,c,d并列,且都嵌套在id为group的div中,且:
#group{potision:relative;height:200px;width:4oopx;} #b{potision:absolute;left:20px;top:20px;}
在这种方式下,父级元素是相对定位,但没有设定left,top的值,可以将其看做是浮动对象,而b是绝对定位,因而不占位,但由于父级元素是相对定位,所以这里的绝对定位变成了相对于父级元素的绝对定位,而不是相对于浏览器的。
例如:
<div id=”main”>
<div id=”a”>aaaaaaaaaa</div>
<div id=”b”>bbbbbbbb</div>
</div>
(1)若给a设置position:absolute,会使a脱离正常的文档流,a会不占位,即b不再基于a,而是直接从parent开始定位。(b位置和没有a一样)。
若给a设置position:relative,(没有脱离文档流)则a会占位,a相对于他的原始位置进行定位,看上去是浮在main上的,而b会按原来的方式进行排列,不受a的影响。(b的位置和a没有position属性时一样)
(2)若给main设置position:relative/absolute;则里面的a或b的绝对定位或相对定位都是相对于父级元素main的,之后后再按照相对或绝对的方法进行定位
注意:若父级元素没有设定有效的宽高值,则b是相对于group中最后一个元素的右上角进行绝对定位父级元素要设置宽高!!!!!!
定位position详解:relative与absolute相关推荐
- 微信小程序 位置定位position详解,相对定位relative,绝对定位absolute相关问题
一.位置position[定位属性:static,relative,absolute,fixed,inherit,-ms-page,initial,unset] 1.static:元素框正常生成,块级 ...
- css 定位position详解,background注意事项 哒哒哒 -----20181119
1.定位position:relative || absolute || fixed生成绝对定位的元素,相对于浏览器窗口进行定位.|| inherit (1)属性解释 ①````position ...
- CSS中的定位(position)详解
将学过的定位进行一个简单的整理,方便以后查阅,也想向大家分享一下. 众所周知,定位分为5种,分别为:静态定位.相对定位.绝对定位.固定定位.粘性定位.下面我为大家详细介绍一下每种定位. 1.静态定位( ...
- html css position,[CSS]CSS Position 详解
一. CSS position 属性介绍 CSS中position属性指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型.有static,relative,absolute和fixed四种取值 ...
- python定位相邻节点_Python selenium 父子、兄弟、相邻节点定位方式详解
今天跟大家分享下selenium中根据父子.兄弟.相邻节点定位的方法,很多人在实际应用中会遇到想定位的节点无法直接定位,需要通过附近节点来相对定位的问题,但从父节点定位子节点容易,从子节点定位父节点. ...
- 冶金工业室内定位方案详解
冶金工业作为典型的重工业行业,冶金生产的多个环节都存在安全隐患,因此,"安全"是保障冶金企业稳定发展的重要前提.EHIGH恒高将UWB室内定位应用于冶金厂区建设中,可以有效健全其安 ...
- Flutter开发之iOS后台定位开发详解
Flutter开发之iOS后台定位开发详解 需求目的 开发一个功能持续获取用户的位置发送给后端,PC端会根据后端传来的移动端发送的位置信息,来绘制使用者的运动轨迹. 实现需求 是否实现 后台定位 ✅ ...
- css里面的位置属性,CSS定位属性Position详解
4. position:relative + position:absolute 如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位.如果给 ...
- css定位属性详解(position属性)
一.定位属性 1.定位属性 属性:position 取值: 1.static ...
最新文章
- web前端入门学习 css(8)(新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
- [vue] vue2.0不再支持v-html中使用过滤器了怎么办?
- logstash安装
- 牵引力教育推荐最先进的5大敏捷PHP开发框架
- Hive与Hbase数据表关联
- 升级http到https
- MySQL 第一次练习(安装MySQL)
- ExtJS-3.4.0系列目录
- ES6-模块导入导出
- 人工智能与自动驾驶汽车_自动驾驶汽车中的道德AI
- 软件开发中协议制定的注意事项
- html5虚拟摇杆,[Unity插件] 虚拟摇杆EasyTouch
- 【网络工程师配置篇】华三交换机基本配置大全(文末附下载链接),网络工程师必备手册
- 单片机原理与接口c语言版周国运答案,单片机原理与应用(C语言版)(周国运)习题答案.doc...
- css的div纵向居中
- 如何使用md5码验证文件的一致性
- 协议转换器的作用有哪些?
- ppt动画制作bullets
- kinect使用手册
- 使用Termux把Android手机变成SSH服务器
热门文章
- php图片旋转显示不出来的,php – 我服务的图像不正确,它们都显示为旋转90度
- c语言tmplink,为了便于阅读,偿试把BLHeli的汇编源程序改成C语言格式
- python一百行代码多少钱_用86行Python代码模拟太阳系
- 学计算机高中要买电脑,大一新生,打着学习的“口号”要求买电脑,父母到底该不该答应?...
- php excelreader 中文,如何解决php excel reader导出excel中文乱码?
- java8 stream index_Java8的stream用法整理
- python我的世界给予物品指令_我的世界指令给予物品 我的世界指令给予物品是多少...
- java const关键字_const关键字:终于拥有真正的常量声明语句
- 自动补足算法是什么_如何自定义Shell(Fish版)的自动补全规则?
- curl php 百度,php curl 模拟登录百度主页