CSS之绝对定位&&相对定位

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Phone_1070333541/article/details/78976204

最近想写一个斗地主的游戏，就在创作的途中遇到了一个界面上的小问题，怎么让纸牌重叠起来，于是就研究了一下绝对定位和相对定位。

---

首先,这是 没有加定位 时的代码及效果：

        <style>
            .div-relative {
                color: #000;
                border: 1px solid #000;
                width: 500px;
                height: 400px
            }

            /* css注释说明： 背景为红色 */
            .div-a {
                /*position: relative;*/
                /*left: 30px;*/
                /*top: 30px;*/
                background: #F00;
                width: 100px;
                height: 100px
            }

            /* 背景为黄色 */
            .div-b {

                background: #FF0;
                width: 100px;
                height: 100px
            }

            /* DIV背景颜色为蓝色 */
            .div-c {
                background: #00F;
                width: 100px;
                height: 100px
            }

        </style>

        <div class="div-relative">
            <div class="div-a"></div>
            <div class="div-b"></div>
            <div class="div-c"></div>
        </div>

效果图如下：

当我把注释放开也就是相对定位时，效果如下：

也就是说在我设置相对定位时，元素的位置是 相对于它自己本来的位置 来进行移动，移动的大小是通过 top:30px ； left:30px ；来设置。

---

而当我设置红色背景是绝对定位时，代码如下：

/* css注释说明： 背景为红色 */
    .div-a {
        position: absolute;
        left: 30px;
        top: 30px;
        background: #F00;
        width: 100px;
        height: 100px
    }

效果如下：

也就是说我在设置了绝对定位后，这个元素就会脱离这个页面变得独立，其他的元素就会认为它不存在，所以其他没有设置元素就顶替了它原来的位置。它相对偏移的元素是它的最近的已经定位的容器，如果没有就会相对与它的父容器，它还有一个好处就是可以指定谁在上谁在下通过 z-index 属性指定一个值，浏览器就通过这个值的大小来确定谁来遮盖谁，（大值的在上面）

这个时候来个demo测试：

<style>
            .div-relative {
                position: relative;
                left: 300px;
                top:100px;
                color: #000;
                border: 1px solid #000;
                width: 500px;
                height: 400px
            }

            /* css注释说明： 背景为红色 */
            .div-a {
                position: absolute;
                left: 30px;
                top: 30px;
                z-index: 90;
                background: #F00;
                width: 100px;
                height: 100px
            }

            /* 背景为黄色 */
            .div-b {
                position: absolute;
                left: 60px;
                top: 60px;
                z-index: 80;
                background: #FF0;
                width: 100px;
                height: 100px
            }

            /* DIV背景颜色为蓝色 */
            .div-c {
                position: absolute;
                left: 90px;
                top: 90px;
                z-index: 70;
                background: #00F;
                width: 100px;
                height: 100px
            }

        </style>

效果如下：

哇塞，很酷炫对不对，肯定用它来设置我的纸牌啦，emmmm：

<style>
    .div-relative {
        position: relative;
        left: 300px;
        top:100px;
        color: #000;
        border: 1px solid #000;
        width: 500px;
        height: 400px;
    }

    .div-a {
        position: absolute;
        left: 30px;
        top: 30px;
        z-index: 1;
        background-image: url(img/1.png);
        width: 100px;
        height: 100px;
        background-repeat: round;
    }

    .div-b {
        position: absolute;
        left: 55px;
        top: 30px;
        z-index: 2;
        background-image: url(img/2.png);
        width: 100px;
        height: 100px;
        background-repeat: round;
    }

    .div-c {
        position: absolute;
        left: 80px;
        top: 30px;
        z-index: 3;
        background-image: url(img/3.png);
        width: 100px;
        height: 100px;
        background-repeat: round;
    }

</style>