首页 > web前端 > H5教程 > 深入理解html5中的position

深入理解html5中的position

黄舟
发布: 2017-07-19 14:32:02
原创
5025 人浏览过

CSS的Position很重要,position一共有4个属性值,就是以下几个值:

                static,relative,absolute,fixed。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定,显示层级通过z-index控制。

static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。

relative:relative 元素遵循正常的文档流,所以周围元素不会忽略它的存在,relative 元素同样支持 top,bottom,left,right等属性。当我们使用 top,bottom,left,right等属性对 relative 元素进行相对定位时的效果有点类似于 margin 属性达到的效果,但是区别在于, relative 元素周围的元素将会忽略 relative 元素的移动

# p 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}
登录后复制


absolute:absolute 元素将会脱离正常的文档流,所以 其周围的元素将会忽略它的存在。如同 absolute 元素的 display 属性被设为了 none 一样。此时,我们可以使用 top,bottom,left,right 等属性对 absolute 元素进行绝对定位。一般情况下定义两个属性,top 或 bottom,left 或 right

# p 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}
登录后复制


fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。

首先,fixed 元素定位与它的父元素无任何关系,它永远是相对最外层的 window 进行定位的。
第二,fixed 元素正如它的名字一样,它是固定在屏幕的某个位置,它不会因为屏幕的滚动而消失。

# p 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}
登录后复制


position属性在CSS布局中是至关重要的,真正的了解了position属性会对今后学习p加CSS有很大的帮助

以上是深入理解html5中的position的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板