深入理解html5中的position-H5教程-PHP中文网

深入理解html5中的position

黄舟

发布： 2017-07-19 14:32:02

原创

5231人浏览过

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。

宠物商店

目前，PetShop已经从最初的2.0、3.0等版本，发展到了最新的4.0版本。PetShop 4.0使用ASP.NET 2.0技术开发，其中加入了众多新增特性，因此，在性能、代码数量、可扩展性等方面有了重大改善。可以说，学习PetShop 4.0是深入掌握ASP.NET 2.0技术的捷径。本节将引领读者逐步了解PetShop 4.0的方方面面，包括应用程序安装、功能和用户界面简介、解决方案和体系

查看详情

# 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中文网其它相关文章！

大家都在看：

H5 前端开发和小程序开发有什么区别 H5页面制作适合哪些应用场景 H5页面制作如何进行测试 H5页面制作的流程是怎样的 H5页面制作能做什么