position定位不设置left top 等值，以及position定位的百分比取值

本文链接：https://blog.youkuaiyun.com/qq_35809245/article/details/54259784

本文详细解析了CSS中绝对定位(position: absolute)的使用方法及其与其他属性如left, top配合的效果，并通过实例展示了不同情况下元素的位置变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，position定位基准问题这里就不在赘述，子元素定位是以其整体

（margin+border+padding+width height）整体外边界为基准相对于设置了除static定位的其他定

位的父元素的width height +padding(也就是border内边界为基准进行定位的），不包括父元素的

详情参见http://blog.youkuaiyun.com/qq_35809245/article/details/53637512

二以下谈谈我的拙见：
1 第一种情况，

如果子元素设置了定位 position：absolute， *但是不设置left top 等

值*，好的，典型的挣了钱不花全部上缴型的，设置了定位的属性，却不进行位置的确定，那么该
子元素只能随波逐流，依旧受到父元素设置 padding 子元素本身设置 margin 等的挤压，

直接撸代码，很黄很暴力，说的再多不如代码来的直接

    <style>
    .box {
        width: 1000px;
        height: 500px;
        background-color: pink;
        overflow: hidden;
        position: relative;
        /*这行代码解决垂直外边距塌陷问题*/
    }
    .one {
        width: 500px;
        height: 200px;
        border: 10px solid black;
        background-color: green;
        position: relative;
    }
    .two {
        width: 100px;
        height: 100px;
        background-color:yellow;
        position: absolute;
        border: 10px solid red;
    }
</style>
</head>
<body>
<div class="box">
    <div class="one">
        <div class="two"></div>
    </div>
</div>
</body>

这里写图片描述
变形一：
父元素padding影响子元素位置

    .one {
        width: 500px;
        height: 200px;
        border: 10px solid black;
        /*增加这一行代码*/
        padding: 100px; 
        background-color: green;
        position: relative;
    }

这里写图片描述
变形二
子元素margin影响子元素本身位置

.two {
        width: 100px;
        height: 100px;
        background-color:yellow;
        position: absolute;
        margin: 100px;
        border: 10px solid red;
    }

这里写图片描述

总结：其实，如果子元素设置了定位元素，但是没有设置left top 等值，那么就相当于定位仅仅是将其从标准流脱标了，对于margin和padding对其的位置影响，可以理解为，其实子元素没有脱标，然后对着标准流说：“你咬我啊，我还在标准流里面”！
变形三：如果不给子元素设置定位 position：absolute ，效果在变形一和变形二的条件下效果是一样的

        .two {
        width: 100px;
        height: 100px;
        background-color:yellow;
        /*position: absolute;*/
        /*注释掉定位代码*/
        margin: 100px;
        border: 10px solid red;
    }

2 第二种情况，子元素设置了定位 position：absolute ，也设置了 left top 的值，定位基准是有除了static定位之外的其他定位的父元素，此时不再多说。

left top 的值表示子元素相对于父元素内边界的左边和上边的距离，下面主要理解以百分比形式出现的left top 值

水平方向的left right 值等于（除了static 定位的以外的其他定位）父元素的宽度 width*百分比
垂直方向的top bottom值等于（除了static 定位的以外的其他定位）父元素的高度 height*百分比

为了方便看图，还是以上面的代码作为栗子，但是去掉了padding和margin的设置

            <style>
            .box {
                width: 1000px;
                height: 500px;
                background-color: pink;
                overflow: hidden;
                position: relative;
                /*这行代码解决垂直外边距塌陷问题*/
            }
            .one {
                width: 500px;
                height: 200px;
                border: 10px solid black;
                background-color: green;
                position: relative;
            }
            .two {
                width: 100px;
                height: 100px;
                background-color:yellow;
                position: absolute;
                left: 10%;
                /*此时left取值是  left = 500*10% = 50px */
                top:10%;
                /*此时top取值是  top = 200*10% = 20px */
                border: 10px solid red;
            }
        </style>
        </head>
        <body>
        <div class="box">
            <div class="one">
                <div class="two"></div>
            </div>
        </div>
        </body>

这里写图片描述

如果注释掉第一个父元素的position

    .one {
            width: 500px;
            height: 200px;
            border: 10px solid black;
            background-color: green;
            /*position: relative;*/
        }

这里写图片描述

此时定位的数值left top 是相对于 box 的宽高为基准计算的百分比的值

    .two {
            width: 100px;
            height: 100px;
            background-color:yellow;
            position: absolute;
            left: 10%;
            /*此时left取值是  left = 800*10% = 80px */
            top:10%;
            /*此时top取值是  top = 500*10% = 50px */
            border: 10px solid red;
        }

三同时大家注意对比记忆背景图片的background-position 详情参阅，对比记忆理解更加深刻。
http://blog.youkuaiyun.com/qq_35809245/article/details/54176679

四，英雄所见略同的啊，鑫神写的可能更好，大家可以参阅这栗个http://www.zhangxinxu.com/wordpress/2010/01/absolute%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E9%9D%9E%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%94%A8%E6%B3%95/

五撸代码上瘾，又12点半了，我要睡觉了，不要太想我。如果觉得有用，右边可以打赏个五毛？（纯洁的微笑，我喜欢分享）