CSS相对定位、绝对定位
CSS定位属性：position。
定位的基本思想：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素或浏览器窗口本身的位置。
position属性值：static、relative、absolute、fixed。
以下所有测试在Firefox40.0下进行。
所用到基本代码：
<style>
body{
margin: 30px 0 0 30px;
padding:;
}
.div1{
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
width: 50px;
height: 50px;
background-color: blue;
}
.div3{
background-color: pink;
width: 80px;
height: 50px;
}
.div4{
background-color: gray;
width: 80px;
height: 50px;
}
</style>
<body>
<div class="div1"><div class="div2">div2</div>div1</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</body>
普通定位：static，默认情况。不设置position属性时，会按照正常的文档流进行排列。
固定定位：fixed，绝对定位的第二种情况（见下文）。
相对定位：relative，元素框偏移某个距离（相对于它原来的位置），它原本的位置空间仍然保留。
.div3{
background-color: pink;
width: 80px;
height: 50px;
position: relative;
left: 300px;
}
DIV3向左偏移了300px，原来的位置还在（DIV4并没有贴上去）。
在元素有父元素的情况下，也是一样的。
.div2{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 250px;
}
绝对定位：元素框在正常文档流中所占据空间关闭，并相对于其包含框定位。包含框可能是文档中的另一个元素框或者是窗口本身。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
分两中情况：
- 父元素/祖先元素定位方式为relative或absolute，则相对于此父元素/祖先元素定位，定位起点为父元素/祖先元素的左上角。请注意：如果父元素/祖先元素设置了padding，则从内边距左上角开始定位。
- 父元素/祖先元素都没有相对或绝对定位，则相对于浏览器窗口定位（相对于窗口的左上角，不考虑body的内外边距）。
第一种情况：
.div1{
position: relative;
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
position: absolute;
left: 300px;
top:;
width: 50px;
height: 50px;
background-color: blue;
}
从上图明显看到，DIV2向左偏移300px，是从内边距左上角开始的，而不是DIV2原始的位置（如果padding为0，则是从原始的位置）。
设置DIV1的外边距为30px，DIV2偏移left、top都为0。
.div1{
position: relative;
margin: 30px;
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
position: absolute;
left:;
top:;
width: 50px;
height: 50px;
background-color: blue;
}
可见，在父元素框有外边距的情况下，偏移也是从内边距开始的。
第二种情况：
body内边距增加30px，DIV2向右偏移360px。
body{
margin: 30px 0 0 30px;
padding: 30px;
}
.div1{
width: 200px;
height: 200px;
padding: 50px;
background: red;
}
.div2{
position: absolute;
left: 360px;
top: 60px;
width: 50px;
height: 50px;
background-color: blue;
}
左边body空白处有外边距、内边距各30px，DIV2偏移30px+30px+300px=360px，刚好与DIV1对齐。证明偏移是从窗口的左上角，而不用管内外边距！
CSS相对定位、绝对定位的更多相关文章
- 前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
- 前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
相对定位 - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素. - 通过position属性来设置元素的定位. -可选值: static:默认值,元素没有开启定位: rela ...
- CSS 相对定位 绝对定位
css中的相对定位和绝对定位. 定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将 ...
- CSS相对定位|绝对定位(五)之z-index篇——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 补充于2016 ...
- [css] CSS相对定位|绝对定位
第一篇链接:http://www.zhangxinxu.com/wordpress/2010/12/css-%E7%9B%B8%E5%AF%B9%E7%BB%9D%E5%AF%B9%E5%AE%9A% ...
- HTML 学习笔记 CSS样式（相对定位 绝对定位）
CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
- CSS position绝对定位absolute relative
常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结 ...
- Day042---浮动 背景图设置 相对定位绝对定位
1.练习浮动 2.文本属性和字体属性 文本对齐 text-align left 左对齐 right 右对齐 center 中心对齐 justify 两边对齐 只适应于英文 text-indent ...
- cordova 导致css中绝对定位top:0会被顶到视图之外
IOS7+ webview全屏导致状态栏悬浮在页面上 解决方案:打开 ios项目/classes/MainViewController.m,修改viewWillAppear方法 - (void)vie ...
- z-index 可以使用负值，CSS相对定位、绝对定位利器
很多技巧都是在工作中测试出来的,我搞DIV+CSS前端开发,现在是安卓收藏家,日常也有很多技巧,刚刚突然发现的这个技巧,真的很实用:Z-index值可以使用负值. z-index是个很强大的属性,是个 ...
随机推荐
- Beej网络socket编程指南
bind()函数 一旦你有一个套接字,你可能要将套接字和机器上的一定的端口关联 起来.(如果你想用listen()来侦听一定端口的数据,这是必要一步--MUD 告 诉你说用命令 "telne ...
- ORACLE解决登陆em状态暂挂方法
1.找到oracle安装目录中db_1/计算机名_orcl/sysman/config/emd.properties , 用记事本打开emd.properties,在emd.properties文件 ...
- 【Android 复习】：从Activity中返回数据
在实际的应用中,我们不仅仅要向Activity传递数据,而且要从Activity中返回数据,虽然返回数据和传递类似,也可以采用上一讲中的四种方式来传递数据,但是一般建议采用Intent对象的方式的来返 ...
- C#入门经典学习笔记一
这篇主要讲C#的一些语法. 1.委托 委托类型声明的格式如下: public delegate void TestDelegate(string message); delegate 关键字用于声明一 ...
- C#程序部署到Android
C#是一种优秀的编程语言,语法之优雅,代码之简洁使得众多软粉多年来对她不离不弃. 但是如何将C#程序部署到Linux, Android等平台,这当然是得依靠众所周知的Mono. 本文Demo程序比较简 ...
- 使用IAR6.1调试LPCXpresso-cn
由于Manly公司驱动兼容性问题,下载破解版的IAR6.1 使用. http://blog.sina.com.cn/s/blog_48bde2b20101e6v0.html 然后使用IAR打开示例wo ...
- HDU-2700 Parity
http://acm.hdu.edu.cn/showproblem.php?pid=2700 题目意思很重要: //e:是要使字符串中1的个数变成偶数.o:是要使字符串中1的个数变成奇数 Parit ...
- Android开发必知--WebView加载html5实现炫酷引导页面
大多数人都知道,一个APP的引导页面还是挺重要的,不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的,正巧html5在制作炫酷动画网页方面比较给力,我们不妨先利用html5 ...
- vimrc语法
前言 工欲善其事,必先利其器.一个programmer必然要先有一个好的editor.vim就是一个十分强大的编辑器.它的强大之处,在于其个性化和可定制.学习vim,就像学习Linux,学习perl, ...
- python中类的继承
python中类的继承 在python中面向对象编程中实现继承,以下面一个实例进行说明. class SchoolMenber(): # __init__类似于c++中的构造函数 # __init__ ...