CSS学习笔记——固定定位小技巧

一、让固定定位贴着版心

一般的固定定位，可以在浏览器左边，要么在右边。

要使得定位刚好贴着版心，则需要进行一点计算：

.fixed {
    position: fixed;
    /* 左边为浏览器的一般宽度 */
    left: 50%;
    /* 利用margin占用版心盒子一般的宽度 */
    /*这里假设版心盒子宽度为800px，那么一般就是400px*/
    margin-left: 400px;
    width: 50px;
    height: 50px;
    background-color: blue;
}

二、让固定定位水平居中

一般没有定位的盒子居中使用的是margin：auto达到居中效果

使用定位后比如position:absolute，直接使用margin:auto属性是不行的，那么办法如下:

box {
    position: absolute;
    /* 盒子的left设为50% */
    left: 50%;
    /* margin负值往左边走自己盒子宽度的一半 */
    /* 这里盒子宽度是200px，一半就是-100px */
    margin-left: -100px;
    width: 200px;
    height: 200px;
    background-color: blue;
}