对css中的定位属性postion刨根解牛

定位的基本思想很简单:

它允许你定义元素框相对于其正常位置应该出现的位置(relative),或者相对于父元素(absolute)、另一个元素甚至浏览器窗口本身的位置(fixed)。显然,这个功能非常强大,也很让人吃惊。

一切皆为框:

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

CSS 定位机制

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

以上介绍皆为铺垫,接下来才是真正的讲解postion这个属性

大家都知道postion属性有四个值,static fixed relative absolute,

今天我们就来剖析这四个值的特点,来揭开他们的神秘面纱:

1、static, 默认值元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

2、relative,元素框偏移某个距离,相对它在正常流中的位置,元素仍保持其未定位前的形状,它原本所占的空间仍保留。偏移量通过top/left/right/bottom/设置

3、absolute,元素框从文档流完全删除(自然其宽高对父元素毫无影响),并相对于postion值为relative其包含块偏移定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

4、fixed ,元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

补充说明:

relative定位:

1、设置一个元素为相对定位后,如果不设置其偏移量(即 top|right|bottom|left值),则对于其本身而言,和没设相对定位,毫无区别和影响,但可能对子元素有影响(比如有绝对定位的子元素)

2、相对定位的元素偏移到其它地方,其宽度高度不会改变(原本width默认100%,还是100%,这是和absolute不一样的地方),不会挤压掉别的地方原本的元素,但会重叠,重叠的效果是,会覆盖掉未定位(即postion值为static)的元素,而不管其元素的html标签在相对定位元素的前面还是后面,对应定位元素,则是根据z-index属性值来,如果两个值相等,则比较html标签在文档中的先后。

3、设置相对定位元素的高度宽度会影响父元素的高度宽度(因为它的原来的坑还占着,原来的坑会随着元素的宽高改变大小)

 

absoute定位:

1、元素设置成绝对定位后,和父元素脱离关系(如果说有关系的话,就为设置偏移量前还在原来的位置,但不占地方,其坑会被后面的兄弟元素霸占,从而重叠),所以其大小变化对父元素毫无影响

2、元素绝对定位后都是块级元素(即使原本是行级元素如span),不过其宽度不设置的话将是内容的实际大小,不在是默认的父元素的宽度,这点和相对定位是有很大区别的

3、千万记住绝对定位元素是相对于,它的相对定位的父元素,如果父元素中没有相对定位的则是相对于body

最后介绍下 z-index属性,它只对定位元素(级postion不等于static)才有效

 

时间: 11-29

对css中的定位属性postion刨根解牛的相关文章

对css中的浮动属性float刨根解牛

1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常见现象: 差不多就这么多啦,现在知道文字环绕图片的原理了吗?倒数第二张图就是最好的说明,浮动的元素的脱离常规流,使后面的元素和自己重叠,但后面的元素的内容又会从浮动元素的左边开始!!!!!!这就是浮动元素的独特之处,也是和绝对定位(也是脱离常规流)很重要的一个不同之处. (备注:float在绝对定位

深入理解css中的定位属性:position

深入理解css中的定位属性:position 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共有四种不同的定位方法,分别是static.fixed.relative.absolute. 第一部分:static static定位是HTML元素的默认值,即没有定位,元素出现在正常的流中,因此,这种定位就不会收到top,bottom,left,right的影响. 如html代码如下: <div class=&qu

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

CSS中的!important属性用法

关于CSS的运用技巧有很多, 今天主要探讨一下CSS中 !important 这个属性的用法.在CSS的使用中,遇到最多的问题就是不同浏览器之间的兼容问题. 由于IE并不严格执行W3C标准, 而又几乎垄断了浏览器市场. 所以作为一名合格的网站制作人员, 必须要针对不同的浏览器进行微调. 实现不同浏览器之间兼容的方法有很多, 比如利用JS探测用户的浏览器类型,从而调用不同的样式表. 或者就是利用!important 属性来实现微调的效果. 下面是具体的例子. 下面是一段普通的 DIV 代码: 下面

深入理解css中的margin属性

转载自  http://www.cnblogs.com/zhuzhenwei918/p/6124263.html 深入理解css中的margin属性 之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些"坑"的,下面我会介绍margin的基本知识以及那些"坑".这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间

css中之margin属性

css中之margin属性 css中的margin属性看似简单,但是有时稍有不慎,就会造成错误.这篇博文我会和大家分享将margin属性用在父元素和子元素之间可能出现的状况. 例1: 效果如下所示: 对于这样的结果毫无疑问,可是如果我们希望绿色的div可以靠下面一些,即上边不要紧贴着红色div.既然是两个div的间距,我们可以在绿色div上使用margin-top来使之分离吗?看下面的例子. 例2 我们在上面(例1)的代码中加margin-top:50px;于绿色div的css中,效果如下所示:

css中的一些属性解析

1.inline-block 存在问题:inline-block的相互间距,元素之间会有一个左右2px的margin一样产生            请看中间的空隙. 为什么会产生这个空隙呢?? 怎么解决呢? 方案1:使子元素在html中无缝排列 <ul> <li>one</li> <li>two</li> <li>three</li> </ul> <!---变成下面的----> <ul>

css中的定位

上一篇博客,我大概介绍了下浮动的使用及行为.其实在整个文档布局中,定位也对我们整个的页面排版有非常好的帮助,当然前提是使用得当. 一.定位分类: a.静态定位  position:static;    :元素按照正常的文档流顺序出现,位置等不产生任何改变(文档流的默认属性). b.相对定位  position:relative;:元素盒会产生移动,并且它在文档流中的原始空间会保留下来. c.绝对定位  position:absolute;:元素从文档流中脱离出来,相对于容器块产生移动,原始空间不

css中的position属性

在css布局中,position发挥了极其重要的作用,很多的网页布局都要用position来完成.position有四个属性值static.absolute.relative.fixed. static 这个属性表示默认的位置,在设置它的时候,可以取消继承属性,在一般情况下则不需要设置这个属性. absolute 这个属性表示绝对定位.绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置就会相对于最初的包含块.元素原先在正常文档流中所占的空间会关闭,就好像该