开发中如何合理使用CSS的相对定位和绝对定位

html-css012

开发中如何合理使用CSS的相对定位和绝对定位,第1张

在谈论如何使用时。我们先来看看CSS对position属性的相关定义:

static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。

relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

什么是文档流? 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流,分别是:浮动、绝对定位和相对定位。

在实际开发当中,通常都是我们相对定位搭配绝对定位使用。例如下面伪代码

<div class="content">

<div id="content_body1"> //图片代码块

</div>

</div>

CSS

.content{

clear: left

margin: 0 auto

position: relative

width: 990px

}

.content_body1{

overflow: hidden

position: absolute

}

这里用两个div包了一个图片段代码。外层div采用了相对定位,内层采用了绝对定位。 为什么这样做呢? 这样的好处

绝对定位(absolute)意思是:将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位,如果对象的父级没有设置定位属性,即还是遵循HTML定位规则的。

相对定位(relative)意思:对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。