开发中如何合理使用CSS的相对定位和绝对定位-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

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

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

创新互联专注于洛浦企业网站建设,响应式网站设计,商城开发。洛浦网站建设公司,为洛浦等地区提供建站服务。全流程按需搭建网站,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

static:无特殊定位,对象遵循正常文档流。top,right,bottom,left等属性不会被应用。
relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位。而其层叠通过z-index属性定义。

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

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

 
//图片代码块
CSS .content{ clear: left; margin: 0 auto; position: relative; width: 990px; } .content_body1{ overflow: hidden; position: absolute; } 这里用两个div包了一个图片段代码。外层div采用了相对定位,内层采用了绝对定位。 为什么这样做呢? 这样的好处是,先把图片代码块固定在外层的div当中(
),如果需要挪动图片位置。直接操作外层的div即可。这样就避免了直接挪动图片影响了页面的其它布局

文章题目:开发中如何合理使用CSS的相对定位和绝对定位
文章出自:http://kswsj.cn/article/gdphsi.html

其他资讯