CSS定位

CSS定位

一、定位

定位指的是将指定的元素摆放到页面的任意位置

通过定位可以任意摆放元素

通过position属性来设置元素的定位

可选值： static:默认值，元素没有开启定位

      relative：开启元素的相对定位

      absolute：开启元素的绝对定位

      fixed：开启元素的固定定位（它也是绝对定位的一种）

当开启了元素的定位（position的属性值是一个非static的值）

可以通过left、right、top、bottom四个属性来设置元素的偏移量

 left：元素的相对与其定位位置的左侧偏移量

 right：元素的相对与其定位位置的右侧偏移量

 top：元素的相对与其定位位置的上侧偏移量

 bottom：元素的相对与其定位位置的底侧偏移量

二、相对定位

当元素的position属性设置为relative时，则开启了元素的相对定位

1、当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化

2、相对定位是相对于元素在文档流中原来的位置进行定位

3、相对定位的元素不会脱离文档流

4、相对定位会使元素提升一个层级

5、相对定位不会改变元素的性质：块还是块，内联还是内联

  通常偏移量只需要使用两个就可以对一个元素进行定位

      一般选择水平方向的一个偏移量和一个垂直方向的偏移量来为一个元素进行定位

eg:

.he{

width: 1000px;

height: 500px;

background-color:greenyellow;

position: relative;

left: 0px;

top: 0px;

}

.he1{

width: 500px;

height: 200px;

background-color: thistle;

position: relative;

left: 500px;

top: 0px;

}

.he2{

width: 100px;

height: 200px;

background-color: violet;

position:relative;

left:900px;

bottom:200px

}

三、绝对定位

当position属性值设置为absolute时，则开启了元素的绝对定位

1、开启了绝对定位会脱离文档流

2、当开启了元素的绝对定位以后，而不设置偏移量时，元素不会发生任何变化

3、绝对位置是相对于离他最近的开启了定位的祖先元素进行定位

父相子绝

（一般开启了子元素的绝对定位都会开启父元素的相对定位）

  如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

      4、绝对定位会是元素提升一个层级

      5、绝对定位会改变元素性质：内联元素变成块元素

                               块元素的宽度和高度默认都被内容撑开

eg:

.box1{

width: 1000px;

height: 500px;

background-color:greenyellow;

position: absolute;

left: 0px;

top: 0px;

}

.box2{

width: 500px;

height: 100px;

background-color: thistle;

position: absolute;

top: 100px;

left: 0px;

}

四、固定定位

当元素的position属性值为fixed时，则开启了元素的固定定位

固定定位也是绝对定位的一种，大部分特点和绝对定位一样

不同的点：固定定位永远相对于浏览器窗口进行定位

      固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动

      TE6不支持固定定位