CSS柱状图图片定位咨询：不改变柱体尺寸的实现或左侧布局

需求可行性分析 #

完全可行，你当前的问题是图片的定位样式设置不当，导致无法像文本一样在柱体内合理排布。不需要直接放弃内部定位改用左侧布局，调整CSS即可实现需求。

问题原因与修正方案 #

现有代码中，图片使用position: relative且保留默认流式布局特性，会撑开或打乱柱体内部结构。需将图片设置为绝对定位，配合父容器的相对定位控制位置，同时限制图片尺寸避免影响柱体大小。

修正后的完整代码 #

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>SF6</title>
</head>
<body>
    <main>
        <section id="tall">
            <article class="tall">
                <div>
                    <p>Sages <img src="./badge/some_stuff_for_richard5.png" alt="badge"></p>
                    <span></span>
                    <span class="tall"></span>
                </div>
            </article>
            <article class="tall">
                <div>
                    <p>prophet</p>
                    <span></span>
                    <span class="tall"></span>
                </div>
            </article>
            <article class="tall">
                <div>
                    <p>renegade</p>
                    <span></span>
                    <span class="tall"></span>
                </div>
            </article>
        </section>
    </main>
</body>
</html>

注：修正了原HTML中<article>未闭合、<span>嵌套在<p>内的结构错误

CSS部分

html{
    font-size: 100%;
    font-family: sans-serif;
}
body{
    background-color: #1a1a2e ;
}
html,body,main{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main{
    overflow: hidden;
    position: relative;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content:center ;
    align-items: center;
}
section{
    background: #1a1a2e
}
section article.tall{
    width: 500px;
    margin: 10px 0; /* 添加间距区分柱体 */
}
section article.tall div{
    position: relative; /* 作为绝对定位元素的父容器 */
    height: 60px; /* 固定柱体高度，避免内容撑开 */
}
section article.tall p {
    color:#ffffff;
    padding: 10px;
    position:relative;
    box-sizing: border-box;
    z-index: 2;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center; /* 文本与图片垂直居中 */
    gap: 10px; /* 文本和图片的间距 */
}
section article.tall p img{
    width: 40px; /* 固定图片尺寸，避免影响柱体 */
    height: 40px;
    object-fit: contain; /* 保持图片比例 */
    flex-shrink: 0; /* 防止图片被压缩 */
}
section article.tall div span:nth-child(2){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #0f3460;
    z-index: -2;
    height: 100%;
    width: 100%;
}
section article.tall div span:nth-child(3){
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgb(94,227,255);
    background: linear-gradient(90deg, rgba(94,227,255,1) 0%, rgba(11,113,230,1) 100%);
    z-index: -1;
    height: 100%;
    width: 70%; /* 调整此值控制柱状图进度 */
}

关键修改点说明 #

• 给柱体容器div设置position: relative和固定高度，约束绝对定位元素的范围。
• 图片设置固定尺寸+object-fit: contain，避免自身大小影响柱体，同时保持比例。
• 将<p>设为flex布局，实现文本与图片的对齐，避免流式布局撑开柱体。
• 修正HTML结构错误，保证页面渲染正常。

布局选择建议 #

如果图片尺寸较大或需要更灵活的交互，将图片放在柱体左侧是合理方案，但内部定位完全可满足需求，具体取决于视觉设计。上述修正后的代码已实现柱体内图片的稳定定位，且不会改变柱体原有尺寸。

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