CSS系列2-定位1:绝对定位VS相对定位
2015-01-25 19:15
288 查看
定位
基本思想:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS定位机制:普通流、浮动和绝对定位
在没有专门指定的情况下,所有的框都是处在普通流的定位中。普通流的元素位置由元素在(X)HTML中的位置决定。块级元素从上到下一个接一个地排列,框之间的距离由框垂直方向的外边距控制。行内元素在一行中水平布置,可以通过水平内边距、边框和外边距调整间距,但垂直内边距、边框和外边距不影响行内框的高度。一行形成的水平框称为行框,它的高度总是足以容纳它包含的所有行内框,设置行高可以增加这个框的高度。
用position属性可以规定元素的定位类型。
position:static
没有指定的情况下,元素position默认值为static,元素框正常生成,块级元素生成一个矩形框作为文档流的一部分;行内元素会创建一个或多个行框置于其父元素中。
![](http://img.blog.csdn.net/20150125171040328?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
position:relative
元素相对于在正常流中的默认位置偏离某个距离,保留未定位前的形状,原本所占的空间仍然保留。
![](http://img.blog.csdn.net/20150125171408844?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20150125171412291?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
position:absolute
元素框从文档流完全删除不占据空间,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就像不曾存在一样。不论原来是何种类型,定位后都生成一个块级框。
![](http://img.blog.csdn.net/20150125172036187?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
当出现覆盖情况时会用到z-index属性,默认属性值为0,属性值越高拥有越高的优先级。
修改块4的z-index属性为-2
![](http://img.blog.csdn.net/20150125172619939?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
行内元素也可以设置
![](http://img.blog.csdn.net/20150125185837215?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
![](http://img.blog.csdn.net/20150125190731532?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYV8zMDI=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
position:fixed
fixed可以看作是absolute的子模块,它的包含块是视窗本身,相对于浏览器窗口进行定位。
关于定位大概就是这么多。我一般都是使用绝对定位,然后在父元素上用相对定位。至于fixed嘛,就用给漂浮的元素啦~
基本思想:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
CSS定位机制:普通流、浮动和绝对定位
在没有专门指定的情况下,所有的框都是处在普通流的定位中。普通流的元素位置由元素在(X)HTML中的位置决定。块级元素从上到下一个接一个地排列,框之间的距离由框垂直方向的外边距控制。行内元素在一行中水平布置,可以通过水平内边距、边框和外边距调整间距,但垂直内边距、边框和外边距不影响行内框的高度。一行形成的水平框称为行框,它的高度总是足以容纳它包含的所有行内框,设置行高可以增加这个框的高度。
用position属性可以规定元素的定位类型。
position:static
没有指定的情况下,元素position默认值为static,元素框正常生成,块级元素生成一个矩形框作为文档流的一部分;行内元素会创建一个或多个行框置于其父元素中。
div{ width: 200px; height:30px; line-height:20px; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; border:3px solid grey; } <div style="background-color:yellow">这是块1</div> <div style="background-color:red">这是块2</div> <div style="background-color:blue">这是块3</div> <div style="background-color:gray">这是块4</div> <div style="background-color:green">这是块5</div>
position:relative
元素相对于在正常流中的默认位置偏离某个距离,保留未定位前的形状,原本所占的空间仍然保留。
div{ width: 200px; height:30px; line-height:20px; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; border:3px solid grey; } .relative{ position: relative; left:20px; height: 30px; } <div style="background-color:yellow">这是块1</div> <div class="relative" style="background-color:red">这是块2,positon:relative</div> <div style="background-color:blue">这是块3</div> <div class="relative" style="background-color:gray">这是块4,positon:relative</div> <div style="background-color:green">这是块5</div>
position:absolute
元素框从文档流完全删除不占据空间,并相对于其包含块定位。元素原先在正常文档流中所占的空间会关闭,就像不曾存在一样。不论原来是何种类型,定位后都生成一个块级框。
.absolute{ position: absolute; left:20px; height: 30px; } <div style="background-color:yellow">这是块1</div> <div class="relative" style="background-color:red">这是块2,positon:relative</div> <div style="background-color:blue">这是块3</div> <div class="absolute" style="background-color:gray">这是块4,positon:basolute,没有设置z-index</div> <div style="background-color:green">这是块5</div>
当出现覆盖情况时会用到z-index属性,默认属性值为0,属性值越高拥有越高的优先级。
修改块4的z-index属性为-2
行内元素也可以设置
span{ width: 200px; height:30px; line-height:20px; margin: 10px 10px 10px 10px; padding: 10px 10px 10px 10px; border:3px solid white; background-color: green; } <span style="background-color:yellow">这是块1</span> <span class="relative" style="background-color:red">这是块2,positon:relative,z-index: -5;</span> <span style="background-color:blue">这是块3</span> <span class="absolute" style="background-color:gray">这是块4,positon:basolute,z-index: -2;</span> <span style="background-color:green">这是块5</span>
position:fixed
fixed可以看作是absolute的子模块,它的包含块是视窗本身,相对于浏览器窗口进行定位。
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
相关文章推荐
- CSS 相对/绝对(relative/absolute)定位系列(二)
- CSS--绝对定位和相对定位
- CSS 相对/绝对(relative/absolute)定位系列(三)
- CSS 相对/绝对(relative/absolute)定位系列(二)
- DIV+CSS定位之相对定位与绝对定位
- CSS 相对|绝对(relative/absolute)定位系列(一)
- css 相对定位 绝对定位 浮动 分析
- CSS的相对定位与绝对定位
- css之相对定位与绝对定位
- CSS 相对/绝对(relative/absolute)定位系列(四)
- CSS 相对/绝对(relative/absolute)定位系列(四)
- (转)css 相对定位 绝对定位 浮动 CSS 相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”
- DIV+CSS定位之相对定位与绝对定位
- 2013-7-30-CSS 相对定位与绝对定位
- CSS 相对定位与绝对定位的理解
- CSS盒子模式_相对定位和绝对定位2
- html 相对定位 绝对 定位 css + div
- 关于css中div的定位(绝对定位和相对定位)(转载)
- div+Css绝对定位(absolute)和相对定位(relative)的总结
- CSS 相对|绝对(relative/absolute)定位系列(一)