当前位置：首页 > 实用文档 > 其他范文> 详解CSS定位的应用及注意事项

详解CSS定位的应用及注意事项

时间：2022-12-06 08:00:33 其他范文收藏本文下载本文

详解CSS定位的应用及注意事项（集锦6篇）由网友“MEMO”投稿提供，下面是小编为大家整理后的详解CSS定位的应用及注意事项，仅供参考，喜欢可以收藏与分享哟!

详解CSS定位的应用及注意事项

篇1：详解CSS定位的应用及注意事项

在讲解CSS定位前，首先要搞清楚以下几个属性的真正含义和区别，如下：

【 position:relative | absolute | static | fixed 】

A：相对定位(position: relative)：如果对某一个元素进行相对定位，它将出现在它所在的位置上，然后，可以通过设置垂直(或水平)位置(top,right,bottom,left四值)，让这个元素“相对于”它的起点进行移动。注：设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留;

B：绝对定位(position: absolute)：绝对定位使元素的位置与文档流无关，所以不会占用空间。与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。注：设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框;

C：固定定位(position: fixed)：固定定位元素的位置总以视窗左上角定位;注：IE6不兼容此属性;

D：static ：没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级;

【定位原理：在文本流中，所有元素的位置都受文本流的限制，但我们可以通过CSS样式去改变这些元素的位置(如：margin，float);其实真正意义上的位移是通过top，right，bottom，left来实现的】

A：position: relative：被相对定位元素不会脱离文档流，它会参考自身静态位置的左上角，通过 top，right，bottom，left进行位置移动。注：相对定位层原有位置还会继续占用文档流;如下图：

红色区域被相对定位后，相对A点通过top:20px，left:15px进行位移，但相对定位层的原有位置还会继续保留;

B：position:absolute：被绝对定位元素会脱离文档流，且会选取自己最近的父级定位元素，通过 top，right，bottom，left进行位置移动。注：当父级position属性是static时，absolute位移定位置将以body的原点坐标进行计算;如下图：红色区域被绝对定位后，被定位层脱离文档流;如果A点层是 relative(或 absolute时，即红色区域的父级)，被定位层会以A点坐标通过top:20px，left:15px进行位移;当父级没有定位时，文档以body的原点坐标通过top:20px，left:15px进行位移;

【定位的实际应用】

问题一：

IE6本身不支持position: fixed属性，但可以通过hack的方法解决此问题，如下：

position: fixed;top: 0;left:0; /* 除ie6之外的浏览器执行此样式 */

_position:absolute:_top:expression(documentElement.scrollTop + 0 + “px”); /* 仅ie6执行此样式 */

问题二：

当绝对定位和相对定位配合使用时，在IE6下会产生一个奇偶BUG;当相对定位层的宽度值是奇数时，绝对定位层的位置是上右(或下右)时，在IE6 下右侧会出现1像素的间隙;反之当相对定位层的高度是奇数时，绝对定位层的位置是左下(或右下)时，在IE6的下方会出现1像素的间隙;所以当采用定位时，相对定位层尽量避免使用奇数数值;如果必须使用奇数值，可以通过HACK方法给IE6单独书写数值(如left:0px;_left:-1px;);

上面所说定位原理都是单独的使用方法，而在实际应用中我们总会使用一些特别的形式;即希望元素具有绝对定位特性的同时，又希望绝对定位的坐标原点可随意固定在网页的某一点上，当这个相对点随意移动时，绝对定位层可以随之改变位置，也就是绝对定位层可以随着网页移动;如果想实现这种定位方式，必须在这个绝对定位层的父级设置相对定位值，那么绝对定位层就会以父级的坐标原点为坐标起始原点;此方法在网页制作中使用的比较广泛，如下：

1. 滚动图的左右按钮(index_zuo,index_you)样式是绝对定位,它的父级(rollBox)样式是相对定位;

2.头像层(pic)样式是绝对定位，它的父级(box)样式是相对定位;

诸如此类的实际应用还有很多，如下拉菜单，焦点图，轮播图和一些不规则的复杂结构都会用到此类定位方式;

由于市场的各类浏览器类型较多，对CSS定位的支持也略有不同，其中IE6的问题相对较多，需要根据不同情况进行不同的调试;

篇2：详解css定位与定位应用

定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样，如果理清了定位的原理，那定位会让网页实现的更加完美。

定位的定义：

在CSS中关于定位的内容是：position:relative | absolute | static | fixed

static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。

relative 不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。

absolute 脱离文档流，通过 top,bottom,left,right 定位。选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。

fixed 固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。

CSS中定位的层叠分级：z-index: auto | namber;

auto 遵从其父对象的定位

namber 无单位的整数值。可为负数

定位的原理：

可以位移的元素（相对定位）

在本文流中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。但是事实上那并非是真实的位移，因为，那只是通过加大margin值来实现的障眼法。而真正意义上的位移是通过top,right,bottom,left（下称TRBL，TRBL可以折分使用。）针对一个相对定位的元素所产生的。我们看下面的图：

[next]

我们看图中是一个宽度为200px，高度为50px，margin:25px; border:25px solid #333; padding:25px; 相对定位的元素，并且位移距上50px，距左50px，

而下方是一块默认定位的黑色区块。我们看到这个处在文本流的区块被上面的相对定位挡住了一部分，这说明：“当元素被设置相对定位或是绝对定位后，将自动产生层叠，他们的层叠级别自然的高于文本流”。除非设置其z-index值为负值，但是在 Firefox等浏览器中z-index为负值时将不会显示。并且我们发现当相对定位元素进行位移后，表现内容已经脱离了文本流，只是在本文流中还为原来的相对对定位留下了原有的总宽与总高（内容的高度或是宽度加上margin\border\padding的数值）。这说明在相对定位中，虽然表现区脱离了原来的文本流，但是在文本流中还还有此相对定位的老C。这点要特别注意，因为在实际应用中如果相对定位的位移数值过大，那么原有的区域就会形成一块空白。

并且我们注意，定位元素的坐标点是在margin值的左上边缘点，即图中的B点。那么所有的位移的计算将以这个点为基础进行元素的推动。当TRBL为正值时位移的方向是内聚的。由此可推，当TRBL为负值时位移的方向是外放的。在图片中有位移的箭头指向标识，带有加号的是正值位移方向，带有减号的是负值位移方向。关于位移方位，可以延伸阅读怿飞的《由浅入深漫谈margin属性（一）》

可以在任意一个位置的元素（绝对定位）

如上所述：相对定位只可以在文本流中进行位置的上下左右的移动，同样存在一定的局限性，虽然他的表现区脱离了文本流，但是在文本流却依然为其保留了一席之地，这就好比一个打工的人他到了外地，但是在老家依然有一个专属于他的位置，这个位置不随他的移动而改变。但是这样很明显就会空出一块空白来，如果希望文本流抛弃这个部分就需要用到绝对定位。绝对定位不光脱离了文本流，而且在文本流中也不会给这个绝对定位元素留下专属空位。这就好比是一个工厂里的职位，如果有一个工人走了自然会要有别的工人来填充这个位置。而移动出去的部分自然也就成为了自由体。绝对定位将可以通过TRBL来设置元素，使之处在任何一个位置。在父层position属性为默认值时，TRBL的坐标原点以body的坐标原点为起始。看下图：

上图可知，文本流中的内容会顶替绝对定位无素的位置，一点都不会客气。而绝对定位元素自然的层叠于文本流之上。而在单一的绝对定位中，定位元素将会跑到网页的左上角，因为那里是他们的被绝对定位后的坐标原点。[next]

被关联的绝对定位

上面说的是单一的绝对定位，而在实际的应用中我们常常会需要用到一种特别的形式。即希望定位元素要有绝对定位的特性，但是又希望绝对定位的坐标原点可以固定在网页中的某一个点，当这个点被移动时绝对位定元素能保证相对于这个原坐标的相对位置。也就是说需要这个绝对定位要跟着网页移动，而并且是因定在网页的

篇3：CSS Hack详解

CSS hack由于不同的浏览器，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果，这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

摘要：

在我们制作页面时CSS hack由于不同的浏览器，比如Internet Explorer,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

CSS Hack大致有3种表现形式，属性级Hack、选择器Hack以及IE条件Hack

注意：尽可能减少对CSS Hack的使用。

原理：

由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。

实际应用：

选择器：

语法：

selector{ sRules }

说明：

选择不同的浏览器及版本

通常如未作特别说明，所有的代码和示例的默认运行环境都为标准模式。

一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

简单列举几个：

代码如下:

* html .test{color:#090;} /* For IE6 and earlier */

* + html .test{color:#ff0;}/* For IE7 */

.test:lang(zh-cn){color:#f00;} /* For IE8+ and not IE */

.test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

:root .test {background-color:green;} /* For IE9 and Opera */

@media screen and (-webkit-min-device-pixel-ratio:0) {.test {color:gray;}} /* For Chrome and Safari */

@-moz-document url-prdfix {.test {color:#fff}} /* For Forefox */

* 上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。

IE条件Hack:

语法：

代码如下:

取值：

if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本

是否：

指定是否IE或IE某个版本。关键字：空

大于：

选择大于指定版本的IE版本。关键字：gt（greater than）

大于或等于：

选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）

小于：

选择小于指定版本的IE版本。关键字：lt（less than）

小于或等于：

选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）

非指定版本：

选择除指定版本外的所有IE版本。关键字：!

目前的常用IE版本为6.0及以上

说明：

用于选择IE浏览器及IE的不同版本

if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）

如不想在非IE中看到某区域，可这样写：

代码如下:

上述p代码块，将只在IE中可见。

if条件6种选择方式的使用示例（下述代码中被条件注释包含的HTML代码块也可以是link标记）：

是否，示例代码：

代码如下:

在上述代码中，只有IE浏览，才能看到应用了test类的元素是红色文本。

大于，示例代码：

代码如下:

在上述代码中，只有IE6以上，才能看到应用了test类的元素是红色文本。

大于或等于，示例代码：

代码如下:

在上述代码中，只有IE6以上（含IE6），才能看到应用了test类的元素是红色文本，

小于，示例代码：

代码如下:

在上述代码中，只有IE7以下，才能看到应用了test类的元素是红色文本。

小于或等于，示例代码：

代码如下:

在上述代码中，只有IE7以下（含IE7），才能看到应用了test类的元素是红色文本。

非指定版本，示例代码：

代码如下:

在上述代码中，除IE7以外的IE版本，都能看到应用了test类的元素是红色文本。

属性级：

语法：

selector{property:value;}或者selector{property:value;}

取值：

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。

*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高

\9：选择IE6+，可以区别所有IE和FireFox。

\0：选择IE8+和Opera

[;property:value;];：选择webkit核心浏览器（Chrome,Safari）。IE7及以下也能识别。中括号内外的3个分号必须保留，第一个分号前可以是任意规则或任意多个规则

[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则，所以通常选用第一种写法最为简洁。

注意：!important并不是一个hack手段，他是被用来改变css的优先级的，因为ie6是不识别!important,所以就被拿来当做css hack的一种，这是错误的。

说明：

选择不同的浏览器及版本

浏览器优先级别:FF

一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子：

如想同一段文字在IE6,7,8显示为不同颜色，可这样写：

代码如下:

.test{

color:#090\9; /* For IE8+ */

*color:#f00; /* For IE7 and earlier */

_color:#ff0; /* For IE6 and earlier */

}

* 上述Hack均需运行在标准模式下，若在怪异模式下运行，这些Hack将会被不同版本的IE相互识别，导致失效。

HACK Demo:

代码如下:

.demo{color:#f1ee18;/*所有识别*/ background-color:#00deff\9; /*IE6、7、8识别*/ +background-color:#a200ff;/*IE6、7识别*/ _background-color:#1e0bd1/*IE6识别*/}

@media screen and (-webkit-min-device-pixel-ratio:0){.demo{background-color:#f1ee18}}{} /* Safari(Chrome) 有效 */

@media all and (min-width: 0px){ .demo{background-color:#f1ee18;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;}/* 仅 Opera 有效 */ }{}

.demo, x:-moz-any-link, x:default{background-color:#4eff00;/*IE7、Firefox3.5及以下识别 */}

@-moz-document url-prefix(){.demo{background-color:#4eff00;/*仅 Firefox 识别 */}}

* +html .demo{background-color:#a200ff;}/* 仅IE7 识别 */

/* 一般情况下我们区分IE7 只用 +background-color 配合 _background-color 就行了如果必须写 .demo, x:-moz-any-link, x:default 这样的代码区分 Firefox3.5及以下则谨记此写法对IE7也有效，故在其中要再重写一次 +background-color 或者使用 * +html .demo{background-color:blue;} 方法仅对 IE7 有效。可使用 @-moz-document url-prefix(){}方法独立区分所有 firefox */

.demo, x:-moz-any-link, x:default{display:block;/*IE7 firefox3.5及以下识别 */+display:none/*再区分一次IE7*/}

@-moz-document url-prefix(){.demo{display:block;/*仅 firefox 识别 */}}

@media screen and (-webkit-min-device-pixel-ratio:0){.demo{display:block;}}{} /* safari(Chrome) 有效 */

@media all and (min-width: 0px){.demo{display:none\0;} /* 仅 Opera 有效 */ }{}

总结：

css hack 并不是标准的css，所以应该尽量少使用hack。

篇4：详解网页设计中的定位应用

详解网页设计中的定位应用

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的'效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现得更加完美.

作者：虫子作者单位：刊名：网络与信息英文刊名：NETWORK & INFORMATION 年，卷(期)： “”(9) 分类号：关键词：

篇5：面试注意事项详解

在面试环节应该注意这样几点：

第一，镇静。无论是谁，只要涉及到考试与选拔，心情多少都有点儿紧张，这很正常。心理学研究表明，适度紧张有利于激发自身潜能，发挥最佳水平。但是倘若高度紧张或者一直处于手忙脚乱状态，试想，这样还能有助于你的考试吗?我想即便是兴奋与激动也会影响你的正常发挥。在每次面试中，我发现总有几位考生紧张得有点过头，这样自然会影响其最后的成绩。实际上他的综合素质并不差，但是过度紧张就会慌乱，一乱就会失去分寸。因此，面试时一定要通过深呼吸等方式尽快让自己平静下来，以一种镇静的心态参加完面试全过程，若如此即便不是最好，但绝对不可能最坏。

第二，自信。人们常说，山外有山，天外有天。的确，优秀的人才很多，这一点必须承认。但当你已经通过层层选拔站在面试台上时，你就不能老是有对手比我优秀，我肯定不行之类的想法。此时，“自信”哪怕来一点“自负”都显得很有必要，都会对你的面试有帮助，反之任何摇头叹息之类的举动都无助自己的面试。换句话说，你连自己都不自信，还指望别人来欣赏你，看中你，那无疑是一句空话。请记住，一旦走进考场，你应该做的就是全身心专注考试，尽最大可能将自己最优秀的一面展示给评委。

第三，清晰。在面试中我发现有的考生紧张得说话语无伦次，思路不清晰，语言重复明显。相反，有的考生说话则相对流畅，甚至抑扬顿挫，语言表达也较恰当。两相比较自然影响最后得分。因此，我觉得无论是上课、说课还是答辩，必须牢牢记住，思路一定要清晰，尤其是答辩环节，也许你对拿到的这个题目不熟悉，无从下手，也许你看到题目后，觉得想说的话很多，但不管是哪一种情况，你最需要做的就是迅速在脑海中划定一个回答提纲，即思考问题的维度，类似内因、外因;学校、家庭、社会、个体;理性、感性;理想、实践等方面，至少要确定几个关键词，切不可东一槌子西一榔头。让人听后一头雾水，不知所云。其实，答不全没有关系，但必须言之有理。很多答辩题本身并没有标准答案，主要就是想考查你的应变能力与知识积累。此时清晰的思路必然会给评委留下深刻的印象。无论何时，切记不能乱了阵脚。

第四，扬长避短。我们每个人都是优点与不足的统一体。但在特定时候，就要学会规避，朝着对自己有利的一面努力。既然是上课与答辩，板书不可缺，说话少不了。但是，不少考生恰恰忽略了自身的不足与优势，如有的人粉笔字实在不好看，却大写特写，甚至随意板书一通，既没有条理，更谈不上美感;而有的人字写得很不错，苍劲有力，遗憾的是板书很少，也没有得到充分展示。有的人普通话欠缺，却大说特说;有的嗓音很有磁性，却没有把握好火候。如此种种，给人的感觉是长处没有得到很好发挥，不足却展露无遗。其结果可想而知。因此，我觉得在面试时一定要学会规避，即把自己的优势在允许的范围内充分展示，将自身的不足尽可能加以回避，实在回避不了，也要想方设法把不利影响降至最低限度。

第五，礼节。孟子说，敬人者，人恒敬之;爱人者，人恒爱之。当你连招呼都不打一声，毫无礼节性地走进考场，站在讲台上，直奔主题，甚至目空一切，自顾自地讲，结束时也是一脸孤傲，扬长而去，完全不把台下的观众与评委放在眼里。的确，也许你并没有做错什么。但试想，如此举动与表现，你会给人留下怎样的印象?殊不知，没有谁天生下来就亏欠你，生活本身也没有什么应该不应该。因此，我觉得，面试时还是要有一些适当性的礼节。俗话说，礼多人不怪。当然，过分的礼节也不可取，有时也会适得其反。细节决定成败，这样说也许有点过分，但不能说没有道理。

诚然，通过面试很不容易，但是考场如战场，有时很残酷，就得拼出一切搏一下。面试是一种挑战，是一种展示，也是一门学问。在那么短短的特定时间里，你怎样才能将自己最优秀的一面尽情展示，赢得评委们的青睐?不是不可能，关键看你怎么做。我想只有你真的重视它，甚至研究它，而且掌握了一些必备的应试技巧，你才有可能成为最后的赢家。

[面试注意事项详解]

篇6：浅谈CSS编程中的定位问题

这篇文章主要介绍了CSS编程中的定位问题,包括绝对定位与相对定位等方面,需要的朋友可以参考下

当人们刚接触布局的时候都比较倾向于使用定位的方式，因为定位的概念看起来好像比较容易掌握。表面上你确切地指定了一个块元素所处的位置那么它就会坐落于那里。可是定位比你刚看到的时候要稍微复杂一点。对于定位来说，有一些东西会绊倒新手，所以在它成为你的惯用技巧前你需要掌握它们。

一旦你更深入地了解了它是怎么运作的，你就能够做出一些更棒的事情来。

CSS盒模型和定位的类型

为了搞清楚定位首先你得了解CSS盒模型。在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章。我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结。

在CSS中，每一个元素都由一个矩形盒子所包含。每一个盒子都会具有一个内容区，内容区被一个内边距所包裹，内边距外是盒子的边框，并且在边框之外会有一个外边距用于与其他盒子分隔开来。这些你可以从下面这张图片看到。

定位模式规定了一个盒子在总体的布局上应该处于什么位置以及对周围的盒子会有什么影响。定位模式包括了常规文档流，浮动，和几种类型的 position 定位的元素。

CSS position 属性可以取5种值：

position: absolute

position: relative

position: fixed

position: static

position: inherit

我会在下面对前三个值进行详细的阐述并简单地讲解一下最后两个值。

static 是 position 默认的属性值。任何应用了 position:static 的元素都处于常规文档流中。它处于什么位置以及它如何影响周边的元素都是由盒模型所决定的。

一个 static 定位的元素会忽略所有 top，right，bottom，left 以及 z-index 属性所声明的值。为了让你的元素能使用任何的这些属性，你需要先为它的 position 属性应用这三个值的其中之一： absolute，relative，fixed

position 值为 inherit 的元素和其他所有属性的继承值一样，元素只是简单地应用了与父元素一样的 position 值。

绝对定位（Absolute Positioning）

绝对定位的元素会完全地从常规文档流中脱离。对于包围它的元素而言，它会将该绝对定位元素视为不存在。就好像 display 属性被设为 none 一样。如果你想要保持它所占有的位置而不被其他元素所填充，那么你需要使用其他的定位方式。

你可以通过 top, right, bottom, 和 left 四个属性来设置绝对定位元素的位置。但你通常只会设置它们其中的两个，top 或者 bottom，以及 left 或者 right。默认地它们的值都为 auto。

弄明白绝对定位的关键是知道它的起点在哪里。如果 top 被设置为20px那么你要知道这20px是从哪里开始计算的。

一个绝对定位的元素的起点位置是相对于它的第一个 position 值不为 static 的父元素而言的。如果在它的父元素链上没有满足条件的父元素，那么绝对定位元素则会相对于文档窗口来进行定位。哈！

关于“相对”这个概念你或许有点迷惑，尤其是还有一个叫相对定位的东西，这是我们还没有讲到的。

当你在一个元素的样式上设置 position:absolute 意味着需要考虑父元素，并且如果父元素的 position 值不为 static ，那么绝对定位元素的起点为父元素的左上角位置。

如果父元素没有应用除了 static 以外的 position 定位，那么它会检查父元素的父元素是否有应用非 static 定位。如果该元素应用了定位，那么它的左上角便会成为绝对元素的起点位置。如果没有则会继续向上遍历DOM直到找到一个定位元素或者寻找失败以到达最外层的浏览器窗口。

相对定位（Relative Positioning）

相对定位的元素也是根据 top, right, bottom, 和 left 四个属性来决定自己的位置的。但只是相对于它们原来所处于的位置进行移动。在某种意义上来说，为元素设置相对定位和为元素添加 margin 有点相似，但也有一个重要的区别。区别就是在围绕在相对定位元素附近的元素会忽略相对定位元素的移动。

我们可以把它看做是一张图片的重像从真实的图片的位置开始进行了一点移动。它原始图片所占据的位置仍然保留，但我们已经没法再看到它，只能看到它的重像。这样就让元素之间可以进行位置的重叠，因为相对定位元素能够移动到其他元素所占据的空间中。

相对定位元素离开了正常文档流，但仍然影响着围绕着它的元素，

那些元素表现地就好像这个相对定位元素仍然在正常文档流当中。

我们无需再追问这个相对的位置是在哪里。因为这个相对位置很显然是正常的文档流。相对定位有点儿像为元素添加了 margin ，对相邻元素来说却像是什么都没发生过。但实际上并没有增加任何的 margin 。

固定定位（Fixed Positioning）

固定定位的行为类似于绝对定位，但也有一些不同的地方。

首先，固定定位总是相对于浏览器窗口来进行定位的，并且通过哪些属性的 top, right, bottom, 和 left 属性来决定其位置。它抛弃了它的父元素，它就是定位中表现地有点儿反叛。

第二个不同点是其在名字上是继承的。固定定位的元素是固定的。它们并不随着页面的滚动而移动。你可以告诉元素它所处的位置并永远不再移动。噢~好像还挺乖巧的。

在某种意义上说固定定位元素有点儿类似固定的背景图片，只不过它的外层容器块总是浏览器窗口罢了。如果你在 body 中设置一个背景图片那么它与一个固定定位的元素的行为时非常像的，只不过在位置上的精度会略少一些。

背景图片也不能改变其在第三个维度的大小，也因而带来了 z-index 属性。

打破了平面的 Z-Index

这个页面是一个二维平面。它具有宽度和高度。我们活在一个用 z-index 作为其深度的三维的世界当中。这个额外的维度能够穿越一个平面。

由上图可知，高的 z-index 位于低的 z-index 的上面并朝页面的上方运动。相反地，一个低的 z-index 在高的 z-index 的下面并朝页面下方运动。

没有的 z-index 的话，定位元素会有点儿麻烦。因为 z-index 能让一个定位元素位于另一个元素的上方或者下方，这或许能让你做出点创造性的东西。所有的元素的默认的 z-index 值都为0，并且我们可以对 z-index 使用负值。

z-index 实际上比我在这里描述的要更加地复杂，但细节写在了另一篇文章里。现在只需要记住这个额外维度的基本概念以及它的堆叠顺序，另外还要记住只有定位元素才能应用 z-index属性。

定位的问题

对于定位元素来说由几个比较常见的问题，都值得我们好好了解。

1.你不能在同一个属性当中应用定位属性和浮动。因为对使用什么样的定位方案来说两者的指令时相冲突的。如果你把两个属性都添加到一个相同的元素上，那么就期望在CSS中较后的那个属性时你想要使用的吧。

2.Margin 不会在绝对元素上折叠。假设你具有一个 margin-bottom 为20px的段落。在段落后面是一个具有30px的 margin-top 的图片。那么段落和图片之间的空间不会是50px（20px+30px）而是30px（30px >20px）。这就是所谓的 margin-collapse，两个 margin 会合并（折叠）成一个 margin。

绝对定位元素不会像那样进行 margin 的折叠。这会使它们跟预期的不一样。

3.IE在 Z-index 上有一些BUG。在IE 6中 select 元素总是处于堆叠层级的最上方而不管它的 z-index 和其他元素的 z-index 是多少。

IE 6和IE 7在堆叠层级上又有另外一个问题。IE 6由最外层的定位元素的层级来决定哪一组的元素处于层级的最上面，而不是每一个单独的元素自身的层级决定。

XML/HTML Code复制内容到剪贴板

style=“z-index: ”>

对上面这段结构，你会预料段落元素处于堆叠层级的最上方。因为它具有最大的 z-index 值。但在IE 6和IE 7中，图片为处于段落的上方。因为 img 具有比 div 更加高的 z-index 层级。因此它会位于所有 div 的子元素的上方。

总结

一个元素上所设置的位置属性会根据其中的一种CSS定位模式来运作。你可以为定位元素设置 absolute, relative, fixed, static (默认), 和 inherit 中的其中一个值。

定位模式和CSS定位元素，定义了一个盒子在布局中应该处于什么位置以及围绕它的元素会受到定位元素带来的影响。

z-index 属性只能被应用与定位元素上。它为页面增加了第三个维度并设置了元素的层级上的顺序。

定位属性看起来好像很好理解，但它的运作与它在表面所看到的有点儿不一样。你可能会觉得的是相对定位更加类似绝对定位。当在做布局设计的时候你通常会想使用浮动并在指定的元素上应用定位来打破布局。

★ HTML前端开发面试题及前端知识