[zz]css绝对定位、相对定位和文档流的那些事
2016-04-28 18:10
357 查看
前言
http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html
接触html、和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。
文档流的概念
确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)。不独占一行
如块级元素(block)
div1
div2
效果如下
ok,那么怎么知道这不是因为没有设置高和宽的样式而出现的情况呢,我们听邓爷爷的话,实践是检验真理的唯一标准
div1
div2
效果如下:额,没坑你吧…
又如内联元素(inline)
超链接1
超链接2
效果如下:可以看到内联元素后跟内联元素不会另起一行
我们再试下inline 后加 block
超链接1
超链接2
div1
效果如下:可以看到div1(block)是另起一行独占的
相对定位 position:relative
故名思意,相对定位就应该是相对于一个东西来定位,而这个东西是什么呢?其实这个东西不是什么,就是元素自己本身,用left right top b0ttom进行定位后,元素会根据原来的位置进行移动,但由于position:relative这个属性并没有脱离文档流的,所以元素本身所占的位置会保留。
下面来做个实验,一看你就懂了- -
div1
div2
div3
效果如下:这是没有加入position:relative文档流的默认排法
我们给div2加position:relative 并用top:-20px;left:50px进行相对移动
div1
div2
div3
效果如下:额,为了给大家看到效果还有省了ps的劲直接截了ide的图…但我保证在浏览器里他也是这么排的。我们可以看到蓝色边框就是div2原来的位置,黑色边框就是通过position:relative相对于原来的位置左移50px; 上移20px得到的,而且我们看以看到,div3并没有因为div2的上移而上移了,原因就是position:relative这个属性是没有脱离文档流的,所以元素本身所占的位置会保留。
绝对定位 position:absolute
好吧终于有点戏肉了,文档流那复杂的玩意我们先不理,所谓绝对定位,其实也要找个东西来相对来绝对的,而这个东西就是元素的第一个有position,且positon不能为static的祖先元素,是不是有点拗口,换个说法吧,就是这个小鬼(element)的定位可以是他的老爸,他的爷爷,他的太公….(祖先要素)中而且第一个是是有钱的(position:absolute)或者是当官的(position:relative),就是不能是个程序猿(position:static 或者没有设position)的。而且值得注意的是position:absolute这个属性是脱离文档流的,所以重新定位后元素是不会占着原来的位置的
还是跟着程序来吧- -
复制代码
http://www.cnblogs.com/tim-li/archive/2012/07/09/2582618.html
接触html、和css时间也不短了,但每次用div+css布局的时候心里还是有点儿虚,有时候干脆就直接用table算了,很多时候用div会出现些不可预料的问题,虽然花费一定时间能够解决,但总不是个事,所以今天特地探索了下css+div的绝对定位和相对定位和文档流的关系。
文档流的概念
确切的说应该是文档文档流模型的机制,html的布局机制就是用文档流模型的,即块元素(block)独占一行,内联元素(inline)。不独占一行
如块级元素(block)
div1
div2
效果如下
ok,那么怎么知道这不是因为没有设置高和宽的样式而出现的情况呢,我们听邓爷爷的话,实践是检验真理的唯一标准
div1
div2
效果如下:额,没坑你吧…
又如内联元素(inline)
超链接1
超链接2
效果如下:可以看到内联元素后跟内联元素不会另起一行
我们再试下inline 后加 block
超链接1
超链接2
div1
效果如下:可以看到div1(block)是另起一行独占的
相对定位 position:relative
故名思意,相对定位就应该是相对于一个东西来定位,而这个东西是什么呢?其实这个东西不是什么,就是元素自己本身,用left right top b0ttom进行定位后,元素会根据原来的位置进行移动,但由于position:relative这个属性并没有脱离文档流的,所以元素本身所占的位置会保留。
下面来做个实验,一看你就懂了- -
div1
div2
div3
效果如下:这是没有加入position:relative文档流的默认排法
我们给div2加position:relative 并用top:-20px;left:50px进行相对移动
div1
div2
div3
效果如下:额,为了给大家看到效果还有省了ps的劲直接截了ide的图…但我保证在浏览器里他也是这么排的。我们可以看到蓝色边框就是div2原来的位置,黑色边框就是通过position:relative相对于原来的位置左移50px; 上移20px得到的,而且我们看以看到,div3并没有因为div2的上移而上移了,原因就是position:relative这个属性是没有脱离文档流的,所以元素本身所占的位置会保留。
绝对定位 position:absolute
好吧终于有点戏肉了,文档流那复杂的玩意我们先不理,所谓绝对定位,其实也要找个东西来相对来绝对的,而这个东西就是元素的第一个有position,且positon不能为static的祖先元素,是不是有点拗口,换个说法吧,就是这个小鬼(element)的定位可以是他的老爸,他的爷爷,他的太公….(祖先要素)中而且第一个是是有钱的(position:absolute)或者是当官的(position:relative),就是不能是个程序猿(position:static 或者没有设position)的。而且值得注意的是position:absolute这个属性是脱离文档流的,所以重新定位后元素是不会占着原来的位置的
还是跟着程序来吧- -
复制代码
相关文章推荐
- 《CSS设计指南》笔记--CSS工作原理
- css3 妙味
- CSS样式的定位
- css去掉iPhone、iPad默认按钮样式
- 【CSS3】页脚区域粘附问题
- word 2013 修订模式下修订的文字样式设置
- CSS实现垂直居中
- CSS中overflow的用法
- CSS文件结构组织
- css 自动出现滚动条
- css属性触发和清除haslayout
- 【CSS3】-伸缩布局盒模型实现 3列等高布局
- CSS+DIV入门
- 对xml文档加载css
- CSS 框模型(Box Model)
- stylus css 框架使用方法深入解析
- PullToRefresh 下拉刷新的样式修改
- CSS3 Transform
- 浅析CSS实现水平垂直同时居中的5种思路
- 分享一款Markdown的css样式