- 浏览: 45619 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
position
- 博客分类：
- css
position
定义：
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
static(默认)，relative(相对定位)，absolute(绝对定位)和fixed(固定定位)。其中static和relative会占据文档流空间，他们并不是脱离文档的。absolute和fixed是脱离文档流的，不会占据文档流空间
名词解释
包含块：
1. “根元素”的包含块（也称为初始包含块）由用户代理建立。在HTML中，根元素就是html元素，不过有些浏览器使用body作为根元素。在大多数浏览器中，初始包含块是一个视窗大小的矩形。
2. 对于一个非根元素，如果其position值是relative或static,包含块则由最近的块级框、表单元格或者行内块祖先框的内容边界构成。
3. 对于一个非根元素，如果其position值是absolute,包含块设置为最近position值不是static的祖先元素。这个过程如下：
如果这个祖先元素是块级元素，包含块则设置为该元素的内边距边界；换句话说，就是由边框（border）界定的区域
如果这个祖先元素是行内元素，包含块则设置为该祖先元素的内容边界。在从左向右读的语言中，包含块的上边界和左边界是该祖先元素中的第一个框内容区的上边界和左边界，包含块的下边界和右边界是最后一个框内容区的下边界和右边界。在从右向左读的语言中，包含块的右边界对应于第一个框的右内容边界，包含块的左边界则取自最后一个框的做内容边界。上下边界也是一样。（自己验证的结果：也是通过边框界定的,参看图示8）
如果没有祖先，元素的包含块定义为初始包含块。
static:
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。（图示1）
relative:
生成相对定位的元素，元素在文档流中所占空间仍然存在，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。而设relative后的元素top、left、right、bottom都是相对于该元素原本所占的空间进行偏移。（图示2）
#box_relative {position: relative; left: 30px; top: 20px;}
absolute:
position设为absolute时元素浮出、脱离文档流，原本在文档流中所占空间将不存在。相对其包含块进行定位。当此元素设置left、top、right、bottom后，如果他的祖先元素全都没有设置position：relative或position或fixed：absolute，那么此元素就是相对于body元素进行偏移（图示3）。否则是相对于自己最近的一个设置了position：relative或position或fixed：absolute的元素进行偏移, （图示4）
#box_absolute { position: absolute; left: 30px; top: 20px;}
注意：1.absolute是绝对的浮动，不会影响其他元素（即使是absolute元素）。
<div class="content"> <div class="page" style="margin-right: 300px">page</div> <span style="position: absolute">cccccc</span> <div class="sidebar" style="width:300px;position: absolute">sidebar</div> <div>ddddddddd</div> </div>
2.行内元素设置为absolute时，不仅左右（上下）margin、padding、width、height都起作用
<div class="content"> <div class="page" style="margin-right: 300px">page</div> <span style="position: absolute;margin-top:30px;padding:20px;width:100px;height:100px;border:5px solid #1fe">cccccc</span> <div class="sidebar" style="width:300px;position: absolute">sidebar</div> <div>ddddddddd</div> </div>
删除position:absolute后（正常span元素）的效果：
3.浏览器可以通过偏移量（top、bottom、left、right）自动地计算宽度或高度。
top:0;bottom:0;left:0;right:50%
4.可以通过设置宽度，高度，padding,margin,border等改变其实际高度和宽度。
top:0;bottom:0;left:0;right:50%；width:50%;height:100%;padding:2em;
5.自动边偏移：元素绝对定位时，如果除bottom外某个任意偏移属性设置为auto,会有一种特殊行为。以top为例，定位元素的顶端要相对于其未定位前本来的顶端位置对其。
<p> when we consider the effect of positioning,it quickly becomes clear that authors can do a great deal of damage to layout,just as they can do very interesting things. <span style="position: absolute;top: auto;left: auto">[4]</span> This is usually the case with useful technologies:the sword always has at least two edges, both of them sharp </p>
6.一般地，如果有一个元素设置为auto，就会修改这个属性来满足整体样式。给定样式，元素会延伸到必要的宽度，而不是收缩。
7.非替换元素和替换元素的定位规则大不相同。这是因为替换元素有固定的高度和宽度，因此其大小不会改变，除非创作人员有意现实地修改。与非替换元素一样，如果值过度受限，用户代理会忽略right的值（对于从左到右读的语言）。
fixed:
position设为fixed时元素相对于浏览器窗口，因此滚动条拖动不影响其相对窗口的位置。但是fixed值在IE6下无效（图示6）
图示1----图示6的事例代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Position</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix {
display: block;
}
/* End hide from IE Mac */
.bg{
background: #FFFFD0;
height:100px;
width:100px;
float:left;
border:1px solid #333;
}
.divBg{
background: green;
width:500px;
}
.box_relative {position: relative; left: 30px; top: 20px;}
.box_absolute { position: absolute; left: 30px; top: 20px;}
.box_fixed {position:fixed;left: 30px; top: 120px;}
h2{
color: red;
}
.divMPB div{
}
</style>
</head>
<body>
<h2>图示1</h2>
<div class="clearfix divBg">
<h4>static</h4>
<div class="bg">框1</div>
<div class="bg">框2</div>
<div class="bg">框3</div>
</div>
<hr>
<h2>图示2</h2>
<div class="clearfix divBg">
<h4>relative</h4>
<div class="bg">框1</div>
<div class="bg box_relative">框2</div>
<div class="bg">框3</div>
</div>
<hr>
<h2>图示3</h2>
<div class="clearfix divBg">
<h4>absolute,并且父级元素有设定position属性为static以外的值，相对body进行定位</h4>
<div class="bg">框1</div>
<div class="bg box_absolute">框2</div>
<div class="bg">框3</div>
</div>
<hr>
<h2>图示4</h2>
<div class="clearfix divBg" style="position: relative">
<h4>absolute,并且父级元素有设定position属性为relative</h4>
<div class="bg">框1</div>
<div class="bg box_absolute">框2</div>
<div class="bg">框3</div>
</div>
<hr>
<h2>图示5</h2>
<div class="clearfix divBg" style="position: relative">
<h4>absolute,并且父级元素有设定position属性为relative,所有div都为absolute</h4>
<div class="bg box_absolute" style="border: solid 5px blue;width:160px;height:140px;text-align: right">框1</div>
<div class="bg box_absolute" style="border: solid 5px yellow;width:120px;height:120px;text-align: right">框2</div>
<div class="bg box_absolute">框3</div>
</div>
<hr>
<br><br><br><br><br>
<h2>图示6</h2>
<div class="clearfix divBg">
<div class="bg box_fixed" style="background: red">Fixed</div>
</div>
<hr>
<h2>图示7</h2>
<div class="clearfix divBg" style="position: relative;padding-left:120px;margin:15px;border:5px solid #000;">
<h4>absolute,并且父级元素有设定position属性为relative,所有div都为absolute</h4>
<div class="bg box_absolute" style="border: solid 5px blue;width:160px;height:140px;text-align: right">框1</div>
</div>
<hr>
<h2>图示8</h2>
<span class="" style="position: relative;padding-left:120px;margin:15px;border:5px solid #000;">
absolute,并且父级元素有设定position属性为relative,所有div都为absolute
<div class="bg box_absolute" style="border: solid 5px blue;width:160px;height:140px;text-align: right">框1</div>
</span>
</body>
</html>
参考文章：CSS权威指南（第三版）、精通CSS
发表评论
-
iconfont font_1
2013-12-26 13:43 0http://ux.etao.com/posts/401 ... -
iconfont font
2013-12-26 13:41 0图形设计生成总结 http://www.yixieshi ... -
IE6,IE7绝对定位元素神秘消失或被遮挡的解决
2013-12-04 16:36 0IE6,IE7绝对定位元素 ... -
css float文字的显示问题（兼容性）
2013-11-22 17:55 0如果float容器未定义宽度，ff下内容会尽可能的撑 ... -
white-space:nowrap
2013-11-19 09:40 0white-space:nowrap应用 注意：f ... -
css3 target
2013-11-17 10:57 0转自：http://www.qianduan.net/cs ... -
css bugs
2013-10-24 10:36 0HR { clear: both; backgro ... -
使用CSS3的appearance属性改变元素的外观
2013-07-30 14:19 0转：http://www.w3cplus.com/css3/ ... -
css 技巧
2013-07-18 09:30 0使用background设置图片来替换文本： 每个网站都 ... -
CSS3 Word-wrap word-break white-space（待整理）
2013-06-15 22:45 0http://www.w3cplus.com/content ... -
浏览器兼容问题
2013-04-27 18:31 0兼容性： 1)浮动双边距：display:inline ... -
CSS竖直对齐vertical-align属性详解
2013-04-27 13:12 0转自：http://zhengguoting.blog. ... -
IE6 fixed min-height max-height
2013-04-08 22:03 0Fixed 1.expression 例子 ... -
ie6 bugs-2
2013-04-08 17:38 0ie6 overflow-y:auto BUG修复 h ... -
中间div滚动
2013-04-08 15:13 0<!DOCTYPE html PUBLIC &quo ... -
font-size:0对取消img的右侧和下侧margin
2013-04-04 21:21 0在做人人面试题时，发现默认情况下img并排会出现右边 ... -
工作总结
2013-02-25 13:57 0hr { width:100%; backgr ... -
IE6 BUG汇总
2013-02-24 08:48 0IE6 BUG汇总http://hi.baidu.com ... -
hasLayout
2013-02-23 17:11 0什么是hasLayout？http://ne ... -
各浏览器对常用行内替换元素的 'baseline' 位置理解不同
2013-02-17 14:44 0转自：http://www.w3help.org/ ...
相关推荐
div的position属性详细讲解 1.流动模型 （块元素，内联元素） 2.浮动模型 （float:） 块状元素这么霸道都是独占一行，如果现在我们想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。...
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
tx=figure('Name','exp2','menu','none','units','normalized','position',[0.3,0.3,0.5,0.5],'color','b'); frame=uicontrol(tx,'style','text','units','normalized','position',[0.02,0.02,0.96,0.7],'fontsize',...
微信小程序----position:sticky:通过position:fixed与position:relative切换。
批量输出 CSS background-position 属性的定位像素值
这个内容是老生常谈了,主要问题就是IE6不支持 position:fixed 引起的BUG.当我们去搜索解决这个bug的垮浏览器解决办法时,绝大多数结果都是说使用 position:absolute 来替代解决,可是我们真的解决了么?没有,因为当页面...
Rotary Position Sensors.pdf
Obtaining Absolute Encoder Position on a TMS320C240.pdf
position的学习文件 zip欢迎下载
position location handbook available chapters
PX4位置解算流程图local_position_estimator_main.cpp
bool FindPath(Position start,Position finish,int& PathLen, Position * &path) {//计算从起点位置start到目标位置finish的最短布线路径，找到最短布线路//径则返回true，否则返回false i...
CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位 CSS中背景background-position负值定位
Virus Fixed Position 1.5 最新原版程序
position_estimator_inav.cpp思路整理及数据流。给出很多常见问题和解答。
浮动层 在ie6下 定位有问题， position 的fixed属性失效， 以下为解决方案
详细讲解heml中position、absolute、relative层叠加的技巧
Hand Book of Position location.part2 讲定位的一本很不错的教材
background-position 的学习.zip 欢迎下载
The position controller is constituted by an adaptive equivalent controller based on identification parameters and an improved sliding mode controller, and the stability of the closed-loop system is ...