百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> 深入了解html5中的position-
分享文章到:

深入了解html5中的position-

发布时间:08/01 来源:未知 浏览: 关键词:
static:静态定位。要是你没有设定position属性,那么缺省就是static。top,left,bottom,right等属性,在static的状况下是无效的,要运用这些属性,必需把position设定为其他三个值之一。 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的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有150人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板