【学习笔记】CSS：position 属性

一、定义和用法：position属性规定元素的定位类型。

 

二、属性值

1）relative：生成相对定位的元素，相对于正常位置进行定位。

2）absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

3）fixed：生成固定定位的元素，相对于浏览器窗口定位。

4）static：默认值。没有定位，元素出现在正常流中。忽略top、bottom、left、right或z-index声明。

5）inherit：从父元素继承position属性值。任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

 

三、说明

1）任何元素都可以定位。

2）无论元素本身是什么类型，绝对或固定元素会生成一个块级框。

3）相对定位元素会相对于它在正常流中的默认位置偏移。

 

四、实际应用：

1）设置了visibility：hidden的元素，在页面上是看不见的，但是元素所占据的位置仍然存在。也就是说，在相应位置会留白。

解决方法：对该元素设置绝对定位(position：absolute)，使元素脱离正常的文档流。还有就是直接使用display：none。

2）有时，我们在网页中放入了一张图片，但是却希望图片的边缘部位不显示出来。这时，可以通过设置元素的形状，使元素被裁剪到形状内，并显示出来。

    eg： img {position:absolute; clip:rect(0px 50px 200px 0px);}。