CSS使用position实现子元素仅顶部10px露在父元素底部外侧

核心错误原因 #

你当前代码失效是因为calc函数的语法错误：CSS要求calc内部的加减运算符两侧必须添加空格，你写的calc(100%-10px)属于无效语法，浏览器会忽略该top属性配置，子元素top属性回退到默认值auto，因此出现在父元素顶部。

修正后可实现需求的完整代码 #

.parent_div {
    position:relative;
    width: 200px;
    height: 200px;
    border: 1px solid #000000;  
}

.child_div {
    position:absolute;
    /* 注意减号两侧必须保留空格 */
    top: calc(100% - 10px);
    left: 25%;
    width:50px;
    height:50px;
    border: 1px solid #dbdde3;
    background-color: #ff0000;
}

实现原理说明 #

• 父元素设置position: relative作为子元素绝对定位的参照基准
• top: calc(100% - 10px)中的100%等于父元素的高度值，含义是子元素的顶部边距离父元素顶部边的距离为「父元素高度减10px」，刚好让子元素的顶部10px区域落在父元素内部，剩下的40px高度完全位于父元素底部外侧
• 如果你不需要子元素溢出父元素的部分显示，可以给父元素添加overflow: hidden属性，就能仅展示露出的10px区域

内容的提问来源于stack exchange，提问作者esims