CSS普通属性篇(一):relative与absolute
目录:
- position的属性值
- relative
- absolute
一、position的属性值
首先基本了解下position的各个属性值:
1、static:默认值。没有定位,元素在正常显示出现(它将忽略top、bottom、left、right、z-index声明)
2、relative:生成相对定位的元素,相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
3、absolute:生成绝对定位的元素,相对于position属性定义为static之外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
*static属性值和fixed属性都非常的容易理解,我们主要对relative属性值和absolute属性值进行说明。
二、relative
1、定位为relative的元素,虽然可以脱离正常的文档流进行移动,但是其本身在文档流中占据的位置仍然保留。如下图所示:
relative元素进行移动是相对于其本身原来位置进行移动,并且当它移动之后,它仍然占据着原来位置的空间。
三、absolute
定位为absolute的元素,也是脱离正常的文档流,并且其本身在文档流中占据的位置不再保留。如下图所示:
其中黄色背景为absolute的元素,蓝色背景被普通元素,红色背景为二者的父元素(父元素被定义为relative)。
如图所示,absolute元素进行移动是相对于离它最近的定义了position属性并且属性值不为static的父层元素进行移动(这个父层元素可以不是其直接父层)。如果其父层全部都未定义除static之外的position属性,那么它将相对于html标签元素进行移动。
1、absolute元素的父元素并没有设置position属性,而其祖父元素设置了position属性,absolute元素则相对祖父元素进行移动。
2、absolute元素的父元素并设置position:static属性,而其祖父元素设置了position:relative属性,absolute元素则相对祖父元素进行移动。
3、absolute元素的父元素并设置position:relative属性,祖父元素也设置了position:relative属性,absolute元素则相对父元素进行移动。
4、absolute元素的父元素和祖父元素都没有设置position属性,absolute元素则相对浏览器显示窗体元素(注意:不是html元素)进行移动。
5、如下图所示,在没有设置移动属性(left,right,top,bottom)时,absolute元素处于正常布局中所处的位置,只是属于“浮在空中”的状态,不占据文档流空间。
CSS普通属性篇(一):relative与absolute相关推荐
- CSS position属性absolute relative等五个值的解释
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
- css魔幻属性跟进篇
白话:即上一篇我脑中飘来飘去的css魔幻属性自己的文章推出之后,这是自己写的第四篇CSS相关的文章,文章绝大部分是自己工作总结得来,另一部分是平日sf回答的与面试中向面试官交流学到的,都是一些比较基础 ...
- 细谈position属性:static、fixed、relative与absolute
更新时间:2019-07-24 09:21:38 学习WEB有些时日了,对DOM中的定位概念有些模糊,特地花了一个下午的时间搜资料.整理写下这篇随笔. 首先,我们要清楚一个概念:文档流. 简单的讲,就 ...
- CSS中position的relative和absolute.
2021 first note CSS中position的relative和absolute. 之前接触过, 听老师讲的时候, 赶脚自己挺明白的, 后来就放下了, 最近又开始复习, 发现有些熟悉但更多 ...
- CSS定位relative和absolute
一.有话要说 以前写内容基本上都是:眼睛一亮--哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了.但是,构思相对/绝对(relative/absolute)定位系列却有好些时日,考虑 ...
- HTML5中margin属性应用,CSS重要属性之 margin 属性知识大整合(必看篇)
以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...
- [css] position的relative和absolute定位原点是哪里?
[css] position的relative和absolute定位原点是哪里? absolute: 定位原点为第一个position不为static的父级元素的左上角. 可以基于该特性实现heigh ...
- css positions 属性 absolute
position: absolute absolute(绝对定位)是指给元素设置绝对的定位,相对定位的对象可以分为两种情况: 1) 设置了absolute的元素如果存在有祖先元素设置了position ...
- CSS 之 posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果
一.简介 今天在网上看到了一条言论说:子元素posiiton:fixed 固定定位在父元素含有 tranform 属性时会失效,变成 absolute 的效果.虽然这个场景,我还没有在实际工作中用到过 ...
- html定位的所有属性,HTML CSS定位属性详解 嘿嘿嘿
定位属性:Position 作用:检索或者设置元素的定位方式"(改变元素位置) 定位的步骤: 1.给元素添加position属性 证明该元素要做位置变 2.确定参照物!(通过position ...
最新文章
- 0x17.基础数据结构 - 二叉堆
- 为什么我能从普通程序员干到大厂总监?
- Verilog设计实例(7)基于Verilog的数字电子钟设计
- NYOJ72Financial Management
- linux版的lcx
- 常考数据结构与算法:二叉树的镜像
- 你能用微信小程序打开小程序了【附开发方法】
- quartus FIR仿真笔记
- linux-centos7 常用的基本命令--用户组管理
- 10月15日~~大08网络~~本周课外实践
- Create a virtualbox Based CentOS 6 OpenStack Cloud Image
- 盗版windows xp摇身一变成正版(不用算号器)
- 你应该知道的十大常见黑客技术
- 大地经纬度坐标系与Web墨卡托坐标系的转换
- C# 添加水印图片、文字、缩略图处理
- 台式电脑没鼠标怎么移动光标_不用鼠标用键盘,怎么移动光标?
- 使用Tab键控制切换网页光标位置
- 变色镜片市场需求广大
- 佐治亚州立大学计算机科学,佐治亚州立大学计算机科学研究生语言及申请要求-费用-课程设置...
- Linux基础命令-进程与系统性能