CSS中相对定位与绝对定位
看了几个讲解定位的博客,觉得还不错,分享之:
博客一:http://blog.sina.com.cn/s/blog_4bcf4a5e010008o0.html
文章中,主要需要参考的有两点:
1,相对定位
请注意,相对定位并没有脱离文档流,“虽然表现区脱离了原来的文本流,但是在文本流中还还有此相对定位的‘老窝’。这点要特别注意,因为在实际应用中如果相对定位的位移数值过大,那么原有的区域就会形成一块空白。”
2,绝对定位
“如果需要这个绝对定位要跟着网页移动,而并且是因定在网页的某一个固定位置。要实现这种效果基本方式就是为这个绝对定位的父级设置为相对定位或是绝对定位。那么绝对定位的坐标就会以父级为坐标起始点。” 特别需要注意的是,这里是父级块的padding左上边缘点为坐标起始点。也就是下图中的A点。
博客二:http://www.divcss5.com/rumen/r403.shtml
1,绝对定位与float浮动不能同时使用,比如一个大盒子里有的是绝对定位,有的是使用css float浮动定位,这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位,这也算是IE6 CSS HACK吧,注意不要混用即可。
CSS中相对定位与绝对定位的更多相关文章
- css 中相对定位和绝对定位
1. css中定位机制有三种: 标准文档流, 浮动, 绝对定位 2. 绝对定位就属于第三种定位, 用到position属性, 下面就是具体设置 相对定位: 相对于自身原有位置(就是普通流的时候)进行偏 ...
- css中相对定位和绝对定位
相对定位: #box_relative { position: relative; left: 30px; top: 20px; } 绝对定位: #box_relative { position: a ...
- 详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- Web—12-详解CSS的相对定位和绝对定位
CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,to ...
- 详解CSS的相对定位和绝对定位(讲得很详细)
详解CSS的相对定位和绝对定位 CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left ...
- css定位:相对定位、绝对定位、固定定位的区别与特性
css定位:相对定位.绝对定位.固定定位的区别与特性 原文地址:http://www.qingzhouquanzi.com/106.html css定位常用的有以下三种: 使用了定位的共同特性: 这三 ...
- 详细讲解CSS中相对定位relative和绝对定位absolute
很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对 定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对 ...
- h5整理--详解css的相对定位和绝对定位
浏览器默认状态下position的属性默认值是static也就是没有定位,元素出现在正常的文档流中,这个时候给元素设置的left,right.bottom.top这些偏移属性是没有效果的,不会生效: ...
- css position相对定位与绝对定位彻底搞懂
定位position position本身就有给...定位的意思 position属性的值: static ---默认值 relative ---相对定位 absolute ---绝对定位 fixed ...
随机推荐
- 关于cookie的文章(cookie与session机制)
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...
- 如何面试有2年java工作经验的应聘人员
1.什么是事务控制?答:事务控制就是将一系列操作当成一个不可拆分的逻辑单元,保证这些操作要么都成功,要么都失败.在关系数据库中,一个事务可以是一条SQL语句,一组SQL语句或整个程序.事务是恢复和并发 ...
- MySQL Workbench 6 不能删除数据等问题(“Error Code: 1175”) 和入门教程
网络资料收集 当用MySQL Workbench进行数据库的批量更新时,执行一个语句会碰到以下错误提示: Error Code: 1175 You are using safe...without a ...
- SQL Prompt自定义代码片段
新增代码片段: 代码片段管理: 代码片段中可以使用以下占位符:详见参考: $DATE$ 插入当前日期. $TIME$ 插入当前时间 $USER$ 插入当前电脑的用户名 $PASTE$ 插入剪切板内容 ...
- Maven学习(三) -- 仓库
标签(空格分隔): 学习笔记 坐标和依赖时任何一个构件在Maven世界中的逻辑表示方式:而构件的物理表示方式是文件,Maven通过仓库来同意管理这些文件. 任何一个构件都有其唯一的坐标,根据这个坐标可 ...
- Arduino学习笔记二:修改LED点灯程序
看了开源社区的LED控制程序,开始上手代码编写,修改,下载以及调试,原文地址:http://www.arduino.cn/thread-1072-1-1.html,这个帖子写的比较通俗易懂. 自己移植 ...
- Code First Migrations更新数据库结构(数据迁移)
背景 code first起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建 (DropCreateDatabaseIfModelChanges),此时就会产生一个问题,当我们 ...
- 发布网站详细步骤(.Net)
(i)打开需要发布的网站 右键需要发布的项目 点击下拉框新建配置文件,输入配置文件名称,点击确定,下一步 发布方法选文件系统,目标位置:项目的根目录 配置选Release 点击发布 (ii) 打开ii ...
- 拼接字符串去掉最后多余的串,JSON的遍历
一.遍历json change_url: function(key, value){ condition[key] = value; var string_url = "?"; f ...
- 学习mongo系列(六)limit(munber),skip(number)
> db.user.find().pretty(){ "_id" : ObjectId("56946fba3a18f4867aecbcd1"), &quo ...