分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

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

发布时间:2023-09-06 01:56责任编辑:郭大石关键词:CSS
在谈论如何使用时。我们先来看看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采用了相对定位,内层采用了绝对定位。 为什么这样做呢? 这样的好处是,先把图片代码块固定在外层的div当中(<div class="content">),如果需要挪动图片位置。直接操作外层的div即可。这样就避免了直接挪动图片影响了页面的其它布局 ????

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

原文地址:http://blog.51cto.com/13765598/2120631

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved