css中定位的问题（position）

***

为了让元素在定位属性下定位，需要对元素设置定位属性position，position的取值有四种，即relative、absolute、fixed和static。

其中static是默认值，表示不使用定位属性定位，相对定位（relative）和绝对定位（absolute）

偏移属性是指 top、left、bottom、right四个属性，它们的取值可以为像素等绝对单位，也可以是百分比
#mydiv {
    position:absolute;
    left: 50%；
    top: 30px;    }
偏移属性仅对设置了定位属性的元素有效

相对定位：

#mybox {
    position: relative;
    left: 20px;    top: 20px;   

}

元素原来占据的位置仍然会保留，也就是说相对定位的元素未脱离标准流；
因为是使用了定位属性的元素，所以会和其他元素发生重叠。

设置元素为相对定位的作用可归纳为两种：一是让元素相对于它原来的位置发生位移，同时不释放它原来占据的位置；
二是让元素的子元素以它为定位基准进行定位，同时它的位置保持不变，这时相对定位的元素成为包含框，一般是为了帮助里面的元素进行绝对定位。

绝对定位：

绝对定位，盒子的位置以他的包含框为基准进行定位。绝对定位的盒子从标准流中脱离。这意味着它们对其他元素的盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
注意：绝对定位是以他的包含框的边框内侧为基准进行定位，因此改变包含框的填充值不会对绝对定位元素的位置造成影响。
绝对定位的偏移值是指从它的包含框边框内侧到元素的外边界之间的距离，如果修改元素的margin值会影响元素内容的显示位置。如果不设置绝对定位元素的偏移值，那么它位于未设置绝对定位属性时在标准流中的初始位置

em {
    background-color: #0099FF;
    position:absolute;
    left: 60px；
    top: 30px;   

}

注意1:但要注意的是，设置为绝对定位（position:absolute;）的元素，并非总是以浏览器窗口为基准进行定位。实际上，绝对定位元素是以它的包含框为基准进行定位的，所谓包含框是指距离它最近的设置了定位属性的父级元素的盒子。如果它所有的父级元素都没设置定位属性，那么包含框就是浏览器窗口
我们对em元素的父级元素p设置定位属性，使p元素成为em元素的包含框，这时，em元素就不再以浏览器窗口为基准进行定位了，而是以它的包含框p元素的盒子为基准进行定位，

p {
    background-color: #dbfdba;
    padding: 25px;
    position:relative;
    border: 2px solid #6c4788;
}
em {
    background-color: #0099FF;
    position:absolute;
    left: 60px;
    top: 40px;

}

综上所述：