如何为固定在右下角的绝对定位图片添加shape-outside属性？

你的核心问题在于：绝对定位元素脱离文档流，文本不会识别它的shape-outside；而float元素无法直接固定到容器底部。可以通过「浮动占位元素+绝对定位图片」的组合来解决，具体步骤如下：

1. 核心原理 #

• 用一个浮动的占位元素（伪元素或空容器）占据右下角位置，给它设置shape-outside让文本环绕；
• 图片通过绝对定位覆盖在占位元素的位置上，实现固定在容器右下角的效果；
• 给父容器设置position: relative，确保绝对定位的图片以父容器为参照。

2. 修改后的代码 #

HTML（无需改动） #

<div id="description" class="card">
    <p id="title" class="weight-bold">LOREM IPSUM</p>
    <p id="text" class="weight-light">
        <span id="p-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at felis ut erat ullamcorper ultricies sed nec magna. Curabitur condimentum porta diam, at bibendum tellus tempor sed. </span>
        <br><br>
        <span id="p-2">Maecenas eget pulvinar nisi. Nulla vehicula ac mi et malesuada. Nunc ac ornare justo, fringilla malesuada justo. Vivamus posuere justo id odio aliquam fermentum. Vivamus at rutrum lacus.</span>
        <br><br>
        <span id="p-3">Proin sollicitudin lobortis auctor. Suspendisse at urna sed nisl sodales euismod</span>
    </p>
    <br><br>
    <p id="credits">
        <span id="autor" class="weight-medium">Author</span><br>Author Role
    </p>
    <img src="image.png">
</div>

CSS（关键修改标注） #

#description{
    margin-top: 66px;
    background-color: $third_color;
    color: $primary_color;
    height: 380px;
    flex-basis: 100%;
    position: relative; /* 新增：让绝对定位元素以当前容器为参照 */
    
    /* 新增：浮动占位伪元素，负责让文本环绕 */
    &::after {
        content: '';
        float: right;
        /* 替换为你的图片实际宽高 */
        width: 200px; 
        height: 150px;
        /* 计算margin-top，将占位元素推到容器底部 */
        margin-top: calc(100% - 150px);
        shape-outside: url("image.png");
        shape-margin: 28px;
    }

    img{
        position: absolute;
        bottom: 0px;
        right: 0px;
        /* 和占位元素保持一致的宽高 */
        width: 200px;
        height: 150px;
        object-fit: contain;
    }

    p{
        padding-left: 54px;
    }

    #title{
        padding-top: 34px;
    }

    #credits{
        padding-bottom: 34px;
    }
}

3. 细节说明 #

• 替换代码中的200px和150px为你图片的实际宽高，确保占位元素和图片尺寸完全匹配；
• calc(100% - 150px)的计算逻辑：容器高度100%减去图片高度，得到占位元素需要的顶部外边距，刚好让它贴紧容器底部；
• 如果图片是不规则形状，shape-outside: url("image.png")会自动识别图片的透明区域，实现精准的文本环绕效果。

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