CSS中的绝对定位与相对定位
层级关系为:
<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
为改变参照物(橘色框)后的效果
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
参照物为最顶级的元素情况。
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; top:50px; left:120px;
<div box3
效果图:
仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图:
IE6的情况下,box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div box3
效果图:
补充:当父元素为relative时,相对于父元素 绝对定位,否则相对于body
转自:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html
参考:http://blog.sina.com.cn/s/blog_a2069648010109zm.html
另参考:http://bbs.blueidea.com/thread-2733320-1-1.html
本文转自《http://www.cnblogs.com/zhangpengshou/p/4895054.html》
CSS中的绝对定位与相对定位的更多相关文章
- css中的绝对定位和相对定位(详解,总结)
css中的绝对定位和相对定位(详解,总结) 总结: 设置绝对定位或者相对定位后都从文档中浮起来了,区别是相对定位还占着原来的位置,绝对定位不占着原来的位置,可以种z-index来改变元素的浮动的堆叠次 ...
- (转)CSS中的绝对定位与相对定位定位
层级关系为: <div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<d ...
- [原创] css中的绝对定位和相对定位
我对博客的认识是:记录问题,解决问题,分享知识.如果有轮子,我不需要造轮子. 首先,定位无论是相对定位还是绝对定位,必须有一个参考项,而这个参考项,专业术语称之为 包含块,这里的包含块是指在定位时 ...
- 关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录)
关于HTML中,绝对定位,相对定位的理解...(学习HTML过程中的小记录) 作者:王可利(Star·星星) HTML中 相对定位:position:relative; 绝对定位:position ...
- CSS中的绝对定位(absolute)误区
这几天在慕课上看视频学习,偶然听到几个老师都说:CSS绝对定位在没有其他有除static定位的包含块的情况下是以body进行定位,如果要想相对当前元素的父元素来定位,父元素一定要设置position: ...
- [Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
- CSS的z-index & 绝对定位与相对定位
1.在有些情况下,需要仔细地控制元素在网页中堆叠顺序.z-index样式属性让你能够设置元素的堆叠顺序. 堆叠元素时,z-index值较大的元素在z-index值较小的下面. 2.z-index值仅在 ...
- position属性中的绝对定位和相对定位
absolute(绝对定位):1.如果没有父级DIV,则会根据浏览器原始点去定位,而且跟他相邻的DIV会忽略它,定位后则可用TRBL(top,right,bottom,left)去布局.注意:TRBL ...
- css绝对定位、相对定位和文档流的那些事
前言 接触html.和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
随机推荐
- hdu1000,hdu1001,hdu1002,hdu1003
hdu1000 仅仅是为了纪念 #include <cstdio> int main() { int a,b; while (scanf("%d%d",&a,& ...
- linux crontab定时任务调用CI框架PHP代码
*****监控项目中使用*****: sudo crontab -u wangyan -e i 5,25,45 * * * * wget http://xxx.xxx.com/xxx/xx Esc : ...
- XML代码生成器——XMLFACTORY 简介(一)
XML代码生成器——XMLFACTORY 简介(一) 软件开发中经常要和第三方应用交互数据,特别是在银行.电信行业,这种需求更是必不可少,往往一个系统要和三五个其它系统交互数据,而数据交换的报文经常采 ...
- ABAP工作区,内表,标题行的定义和区别
工作区域跟变量一样,是用来保存数据的.区别是变量只能从中保存一个数据.而工作区域可以存放多个.把多个数据合在一起就成工作区域了.下面我们来看看工作区域是如何定义的吧.定义有四种方法,如下:1 ...
- C# BackgroundWorker的使用
文章摘自:http://www.cnblogs.com/tom-tong/archive/2012/02/22/2363965.html BackgroundWorker 可以用于启动后台线程. 主要 ...
- 启发式搜索A*算法
A* 寻路算法 (2011-02-15 10:53:11) 转载▼ 标签: 游戏 分类: 算法 概述 虽然掌握了 A* 算法的人认为它容易,但是对于初学者来说, A* 算法还是很复杂的. 搜索区域(T ...
- iOS Orientation bug
Every September means pain for iOS developers- you need to make sure your old apps/code run on the n ...
- 新冲刺Sprint3(第六天)
一.Sprint介绍 商家功能模块继续完善着,加快了工作的步伐. 二.Sprint周期 看板: 燃尽图:
- Java 第十周学习总结
20145113<Java程序设计>第十周学习总结 基础知识 1.网络通讯的方式主要有两种 TCP(传输控制协议)方式:需要建立专用的虚拟连接以及确认传输是否正确 UDP(用户数据报协议) ...
- C#中ref,out
out 关键字会导致参数通过引用来传递.这与 ref 关键字类似,不同之处在于 ref 要求变量必须在传递之前进行初始化.若要使用 out 参数,方法定义和调用方法都必须显式使用 out 关键字 比如 ...