- 浏览: 47379 次
- 性别:
- 来自: 北京
文章分类
最新评论
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/ ...
相关推荐
在微信小程序开发中,`position:sticky` 是一个非常实用的CSS样式,它结合了`position:relative`和`position:fixed`的特点,用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置,从而...
在CSS中,`background-position`属性是一个非常重要的部分,它控制着背景图像在元素内的位置。这个属性允许我们精确地定位背景图像,从而实现各种视觉效果。 批量输出`background-position`属性的定位像素值通常是...
" Float与Position属性" Float 与 Position 属性是 CSS 中两个重要的概念,它们可以帮助开发者建立复杂的布局,实现多年的梦想。通过这两个属性,可以将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用...
在MATLAB开发中,"SunPosition"项目涉及的是利用编程计算太阳的地心赤道位置,这一概念在天文学和地球科学中非常重要。太阳的地心赤道位置是指从地球的中心观察,太阳在天球赤道上的坐标,通常以国际天球参照系统...
在网页设计和开发中,`position`属性是CSS(层叠样式表)中的一个关键概念,用于控制元素在页面上的定位方式。`position`属性允许开发者精确地布局元素,实现复杂的网页布局效果。本学习文件将深入探讨`position`...
### 解决IE6中的定位问题:Position Fixed 在早期的Web开发中,Internet Explorer 6(简称IE6)因其浏览器兼容性问题而臭名昭著。其中一个常见的问题是`position: fixed;`属性在IE6中不起作用。这使得开发者很难...
在CSS世界中,`background-position`是一个至关重要的属性,它允许我们精确地控制背景图像在元素内的位置。这个属性在网页设计中广泛应用,用于创建各种视觉效果,如图像滑动、定位图标等。本篇文章将深入探讨`...
### div的position属性详解 #### 一、流动模型(块元素与内联元素) 流动模型是CSS布局的基础,指的是在没有特别指定定位方式的情况下,元素按照文档流的自然顺序排列。 - **块元素**:默认情况下,每个块元素...
关于 position、absolute、relative 层叠加的技巧 Position 属性是 CSS 中的一种布局方式,用于控制元素在文档中的位置。Position 属性有五个值:static、relative、absolute、fixed 和 inherit。其中,static 是...
Virus Fixed Position 1.5 是一款针对计算机病毒定位与修复的软件,旨在帮助用户检测并消除系统中的恶意软件和病毒。这款最新原版程序确保了用户能够获取到最新的反病毒技术和安全更新,以保护他们的计算机免受不断...
"获取元素绝对位置 position"这个话题主要关注JavaScript中如何准确地定位DOM元素在页面中的坐标。这里,我们将深入探讨相关知识,并参考提供的博客链接以及相关的HTML文件。 首先,元素的绝对位置是指元素左上角相...
在After Effects(AE)这款强大的视觉特效和动态图形软件中,"Position"(位置)属性是每个图层不可或缺的一部分,它决定了图层在合成中的显示位置。本篇将深入探讨AE层中的Position位置操作,帮助你更好地理解和...
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的...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',...
CSS中的position属性用于指定元素在文档流中的定位方式,它决定了元素在页面上的布局和交互方式。position属性包含四个可能的值:static、fixed、relative、absolute,下面逐一详细说明。 1. static定位:这是...
在本篇关于“three.js 入门三:buffergeometry贴图属性(position、index和uvs)”的文章中,我们将深入探讨如何使用three.js库在3D场景中应用纹理贴图,特别是关注BufferGeometry对象中的关键属性。BufferGeometry...
在CSS布局中,`position`属性是一个至关重要的概念,它决定了元素在页面上的定位方式。本文将详尽地探讨`position`属性中的`relative`和`absolute`值,以及它们在网页设计中的应用。 首先,`position`属性的默认值...
在CSS布局中,`position:relative`和`overflow:hidden`是两个非常重要的属性,它们分别用于控制元素的位置和其内容的溢出行为。本文将详细探讨这两个属性的工作原理以及它们之间的相互影响。 首先,我们来看`...
然而,在Internet Explorer 6 (IE6)这个古老的浏览器中,`position: fixed;`并不完全按照预期工作,存在一些兼容性问题。这个问题困扰了开发者很多年,因为它限制了网页在IE6上的设计灵活性。 为了解决IE6中的`...
标题 "speed_position_dcmotor_" 暗示我们讨论的主题是关于直流电动机(DC Motor)的速度和位置控制模型。在这个模型中,我们将探讨直流电机的工作原理、速度控制和位置定位的基本概念,以及如何通过模拟(如使用...