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会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是 ...
随机推荐
- JavaScript数据属性与访问器属性
ES5中对象的属性可以分为‘数据属性’和‘访问器属性’两种. 数据属性一般用于存储数据数值,访问器属性对应的是set/get操作,不能直接存储数据值. 数据属性特性:value.writable.en ...
- 黑马程序员:Java编程_IO流
=========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设 ...
- [GodLove]Wine93 Tarining Round #8
比赛链接: http://vjudge.net/contest/view.action?cid=47644#overview 比赛来源: 2012 ACM/ICPC Asia Regional Tia ...
- Doherty Threshold
Prior to the publication of the IBM technical paper behind what commonly known today as the Doherty ...
- redis 原子增一的妙用
有这样一个需求,插入数据库之前需要了解数据库ID号,考虑到不同的主机怎么去协同这个ID呢 同时要保证每个主机分到不同的ID号,这个比较麻烦,如果独立开一个服务来一个C/S操作比较麻烦,幸好REDIS提 ...
- GIT 使用文档
GIT 使用文档 git clone http://wanghaiyang:Z123456w@192.168.1.118/wanghaiyang/hdtas.git git add . //添加当前文 ...
- Spring Application Event Example
Spring Application Event 项目结构 工程下载 https://github.com/xiaoheike/SpringApplicationEventExample.git Sp ...
- stunnel-server
#!/bin/bash # need to be run as root ]]; then echo "must to be run as root" exit fi # givi ...
- 第五章——搭建S3C6410开发板的测试环境
搭建S3C6410开发板的测试环境 通过本章的学习学会了如何在开发板上安装Android.开发板是学习和开发嵌入式技术的主要硬件设备,想要顺利的通过linux驱动访问硬件,是不能在PC板上模拟的,需要 ...
- cannot simultaneously fetch multiple bags
问题是什么时候出现的呢? 当一个实体对象中包含多于一个non-lazy获取策略时,比如@OneToMany,@ManyToMany或者@ElementCollection时,获取策略为(fetc ...