CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm
这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。
详解CSS+DIV布局定位
在用CSS+DIV进行布局定位的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:
先看下position各个属性值的定义:
1、static:默认值。没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)。
2、relative:生成相对定位的元素,通过top,bottom,left,right的设置相对于其正常位置进行定位。可通过z-index进行层次分级。
3、absolute:生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
4、fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。可通过z-index进行层次分级。
static与fixed的定位方式较好理解,在此不做分析。下面对应用的较多的relative和absolute进行分析:
1、relative。
定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在。如图1:
黄色背景的层定位为relative,红色边框区域为其在正常流中的位置。在通过top、left对其定位后,从灰色背景层的位置可以看出其正常位置依然存在。
2、absolute。
定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在。如图2:
可以看到,在将黄色背景层定位为absolute后,灰色背景层自动补上。
3、relative与absolute的主要区别:
首先,是上面已经提到过的在正常流中的位置存在与否。
其次,relative定位的层总是相对于其最近的父元素,无论其父元素是何种定位方式。如图3:
图中,红色背景层为relative定位,其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute,则情形如图4:
可以看到,红色背景层依然定义top:20px;left:20px;但其相对的元素变为定位方式为absolute或relative的黄色背景层。因此,对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层,而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative,则其将相对body进行定位,如图5:
除top、left、right、bottom定位外,margin属性值的定义也符合上述规则。
CSS+DIV布局中absolute和relative区别相关推荐
- dreamweaver cs5 css教程,网页设计与制作——Dreamweaver CS5标准教程第12章 CSS+Div布局.pptx...
第12章 CSS+Div布局;1. 盒子模型2. 布局技术3. "上中下"布局4. "左中右"布局;12.1.1盒子结构网页中元素都占据一定的空间,除了元素内容 ...
- 【小5聊】使用js+css+div布局方式画一棵圣诞树,带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- css+div布局实现简历界面
工具 IntelliJ IDEA,Photoshop CS3 材料 简历(PDF) 步骤 1 根据div布局思想切分简历 2使用ps cs3将简历中出现图标合成到一张图中 3.css+div布局实现简 ...
- position absolute 与 relative 区别
position absolute 与 relative 区别 absolute 绝对定位元素可以放置到页面上的任何位置 relative 相对定位会按照元素的原始位置对该元素进行移动
- html中表格布局还是div布局,表格布局和css div布局
请简单说明表格布局网页和DIV+CSS布局网页的不同之处? 请简单说明表格布局网页和DIV+CSS布局网页的不同之处? div+css布局和表格框架式布局的优缺点各是什么?如题,越详细越好 TABLE ...
- 探究position定位中absolute和relative的异同
相信学过CSS的同学都曾经对于position的各种属性很困惑,尤其是absolute和relative定位,简直就是傻傻分不清,笔者写这篇文章就是希望通过代码实验的方式来揭露absolute和rel ...
- CSS:CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
- html body最小高度,CSS网页布局中的最小高度问题的解决方法
假定有二个BOX,我们需要它的最小高度为150PX. CSS 复制代码代码如下: div.box1,div.box2{ width: 300px; min-height: 150px; backgro ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
最新文章
- Mybatis的各种查询功能
- 1039 到底买不买
- tf.keras.activations.softmax 激活函数 示例
- 每日一皮:公鸡说,你不会下蛋上去瞎扭啥嘛...
- onnx onnxruntime 预测
- python如何读取数据集_如何在Python中读取通用数据格式(CDF)
- ASP.NET Core MVC 源码学习:详解 Action 的匹配
- 《Redis实战》一第一部分 入门
- 【Linux - mysql】linux下mysql报Failed to restart mysqld.service: Unit not found
- python线程池模块_python并发编程之进程池,线程池,协程(Python标准模块--concurrent.futures(并发未来))...
- 大流量场景下如何云淡风轻地进行线上发布?
- 【多题合集】AC自动机练习,被HDU支配的恐惧
- 程序设计实习MOOC / 程序设计与算法(二)第二周测验(2018春季)
- js获取ck_JS获取CkEditor在线编辑的内容
- Centos7解压Zip文件
- little VGL Visual Studio 模拟器仿真
- WIN10版本安装JDK
- 全球主流云桌面传输协议
- mysql强行结束程_如何强制结束进程?
- 小学计算机兴趣班活动方案,兴趣班活动方案
热门文章
- Android Manifest配置文件中use-permission相关内容列表
- 打印机乱码不停打印_性价比高的打印机推荐【2020年9月】-十大高性价比家用/办公打印机...
- java---集合类---ArrayList类
- 广州高清卫星地图 用百度卫星地图server下载 含标签、道路数据叠加 可商用
- 北航计算机研究院,计算机学院-北航研究生院-北京航空航天大学
- linux 模拟误码率,基于System View的比特误码率测试的仿真研究
- GROMACS Tutorial 2-Membrane Protein: KALP15 in DPPC
- 安卓+七牛云的第三方图片存储实践
- 2022年潜江中级工程师职称申报材料和申报渠道是什么呢?甘建二
- 蒙特卡洛与遗传算法介绍