设置密码

验证码错误,请重新填写

免费建站旅程马上开始

开始建站
建站中

已有帐号?直接登录

首页>森动学院>网站建设教程 > CSS position属性和定位
CSS position属性和定位
发布时间: 2014-06-16

Position的英文原意是指位置、职位、状态。也有安置的意思。在CSS布局中,Position发挥着非常重要的作用,很多容器的定位是用Position来完成。   Position属性有四个可选值,它们分别是:static、absolute、fixed、relative。我们下面来共同学习它们的不同的用法,在学习中我们应该去思考在什么布局情况下,应该使用它们其中的哪一种。


1、position:static


所有的元素的默认定位都是position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。


2、position:relative

   如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】


3、position:absolute

 当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。


4、position:relative + position:absolute

 如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。


5、两栏绝对定位


  

 

6、浮动

   对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。



7、浮动列

   如果我们把一个元素向左浮动,并且把第二个元素也向左浮动,they will push up against each other。

 
 

8、清除浮动列

   在浮动元素之后,我们可以清除浮动来使其他元素正确定位。





文章来源:森动网小鱼儿,转载请注明出处!