近期关于absolute 和 relative学习的一点理解

1.relative不脱离文档流,只相对于自身原来的在文档流中的位置进行偏移,所使用top right bottom left是相对于原来的box的对应的margin进行偏移,相对于top(往下)right(往左)bottom(往上)left(往右)这些方向的偏移是正的,相反方向为负,可以总结一下,其实是无论从哪个方向,往内聚的方向为正,往外的方向为负。

2.absolute脱离文档流,后面紧随的元素可以补上填充其原来的位置,absolute相对于离其最近的已定位的父元素进行偏移(已定位的可以是relative或absolute或fix),同时top,right,bottom,left也是相对于该元素的对应的padding(注意,absolute是相对于父元素的padding的,relative相对的是margin),同样也是内聚的偏移数值为正。

3.一般来说,把需要使用absolute的父元素加上relative,父元素不设置任何的偏移,然后让子元素使用absolute进行相对于父元素的准确偏移,这种情况比较常用。

4.float脱离文档流,直到遇到父元素的边界或另一个浮动元素的边界后才停止浮动。

5.margin影响附近的元素只影响存在于文档流中的元素。

时间: 2024-10-27 13:22:39

近期关于absolute 和 relative学习的一点理解的相关文章

position属性absolute与relative 详解

position属性absolute与relative 详解 转自:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html 最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative  http://www.blueidea.com/tech/web/2006/4249.asp 很多朋友问过我

Position属性四个值:static、fixed、absolute和relative的区别和用法

Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声

Position属性四个值:static、fixed、absolute和relative的区别和用法(转自博友 Newbie_小白)

在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果.今天研究了一下,总算有所了解.在此总结一下: 先看下各个属性值的定义: 1.static(静态定位):默认值.没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明). 2.relative(相对定位):生成相对定位的元素,通过top,bottom,left,ri

Absolute and relative references in Excel

Keywords: Excel, fill multiple cells, formula, no series Absolute and relative references in Excel When you create a formula in Excel that refers to other cells in the worksheet, Excel will store the information about those cells as relative referenc

CSS position的absolute和relative的解析[转]

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,

【webQD】☆★之详解position: absolute、relative属性

[webQD]☆★之详解position: absolute.relative 首先我们来看一下W3C对position的解释: 我们再看,W3C对position属性值的解释: ok,我们需要了解的是: 其中absolute和relative是最常用的,fixed用得也比较多(其中IE6并不支持fixed). 1.absolute(绝对定位) absolute是生成觉对定位的元素,脱离了文本流(即在文档中已经不占据位置),参照浏览器的左上角通过top,right,bottom,left(简称T

CSS+DIV布局中absolute和relative的区别

来源 :http://developer.51cto.com/art/201009/225201_1.htm   解释的很好.摘下来后面自己能看看. 区别:定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. position各个属性值的定义: 1.static:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)

absolute和relative的几个Demo

这些例子最好通过FireFox结合FireBug调试查看 1.absolute让元素inline-block化 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

css absolute与relative的区别

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-