如何用CSS将图片和图标定位在视频底部？

DevOps 小满

2026-7-23

实现视频上叠加头像及图标的CSS方案

我想通过CSS给视频添加头像图片和图标，达到如下示例图的样式：

我试过用position: absolute、transform: translate(-50%, -50%)和bottom: 100%来定位，但没效果。当前模板已经引入了Bootstrap 5、Video.js和谷歌图标，下面是我尝试的代码：

原尝试代码

CSS部分

.img_wrapper.a img {
        position: absolute;
        transform: translate(-50%, -50%);
        bottom: 100%;
    }
     
 .thumb{
        width: 30px;
        height: auto;
    }

HTML部分

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
<link rel="stylesheet" 
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<div class="container">
    <div class="row justify-content-center">

        <div class="col-md-2">
            
            <div class="row">
                <video id="my-video"
                        class="video-js text-center"
                        controls
                        preload="auto"
                        height="400px"
                        data-setup="{}"
                        poster="https://thumbs.dreamstime.com/b/confident-black-business-man-stylish-suit-standing-folded-arms-rooftop-n-office-block-looking-camera-69650703.jpg"
                        muted>
                    <source src="" type="video/mp4">
                </video>

                <div class="img_wrapper">
                    <a style="text-decoration: none;" href="{{ video.get_user_public_url }}">
                        <p><img class="rounded-circle thumb" src="https://thumbs.dreamstime.com/b/confident-black-business-man-stylish-suit-standing-folded-arms-rooftop-n-office-block-looking-camera-69650703.jpg" alt="">
                            <b>Bamagujen Bahaushe</b>
                        </p>
                    </a>
                </div>  
                
                <div class="video-icons">
                    <a href="">
                        <span class="material-symbols-outlined">
                            fingerprint
                        </span>
                    </a>
                    <a href="{% url 'Play-Video' video.slug %}">
                        <span class="material-symbols-outlined">
                            comment
                        </span>
                    </a>
                    <a href="{% url 'Complain-Video' video.pk %}">
                        <span class="material-symbols-outlined">
                            flag
                        </span>
                    </a>
                </div>
            </div>
            
        </div>  
        
        <div class="col-md-6">
            <div class="content-right">
                <p>Lorem ipsum dolor sit, amet consectetur
                    adipisicing elit. Qui, minus, optio atque nostrum 
                repellendus delectus eos non veritatis, 
                illum soluta quas id aliquid facilis molestiae 
                facere nam neque? Fugiat, repellendus.</p>
            </div>
        </div>
        
        
    </div>
</div>

解决方案

定位失效的核心原因是绝对定位元素需要一个非static定位的父容器作为参考，以下是修改后的完整代码：

修改后的CSS

/* 给视频容器设置相对定位，作为绝对定位的参考 */
.video-container {
    position: relative;
}

/* 调整头像定位，实现视频底部居中叠加效果 */
.img_wrapper img {
    position: absolute;
    bottom: -30px; /* 让头像一半嵌入视频底部，根据尺寸调整 */
    left: 50%;
    transform: translate(-50%, 0);
    border: 2px solid #ffffff; /* 增加白色边框，贴合示例图样式 */
}

.thumb {
    width: 60px; /* 放大头像，提升视觉效果 */
    height: auto;
}

/* 调整图标栏布局，实现居中排列 */
.video-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    color: #666666;
}

修改后的HTML

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous">
<link rel="stylesheet" 
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.4/font/bootstrap-icons.css">
<link href="https://vjs.zencdn.net/8.0.4/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<div class="container">
    <div class="row justify-content-center">

        <div class="col-md-2">
            
            <div class="row">
                <!-- 新增视频容器，设置相对定位 -->
                <div class="video-container">
                    <video id="my-video"
                            class="video-js text-center"
                            controls
                            preload="auto"
                            height="400px"
                            data-setup="{}"
                            poster="https://thumbs.dreamstime.com/b/confident-black-business-man-stylish-suit-standing-folded-arms-rooftop-n-office-block-looking-camera-69650703.jpg"
                            muted>
                        <source src="" type="video/mp4">
                    </video>

                    <div class="img_wrapper">
                        <a style="text-decoration: none;" href="{{ video.get_user_public_url }}">
                            <img class="rounded-circle thumb" src="https://thumbs.dreamstime.com/b/confident-black-business-man-stylish-suit-standing-folded-arms-rooftop-n-office-block-looking-camera-69650703.jpg" alt="">
                        </a>
                    </div>  
                </div>
                
                <div class="video-icons">
                    <a href="">
                        <span class="material-symbols-outlined">
                            fingerprint
                        </span>
                    </a>
                    <a href="{% url 'Play-Video' video.slug %}">
                        <span class="material-symbols-outlined">
                            comment
                        </span>
                    </a>
                    <a href="{% url 'Complain-Video' video.pk %}">
                        <span class="material-symbols-outlined">
                            flag
                        </span>
                    </a>
                </div>
            </div>
            
        </div>  
        
        <div class="col-md-6">
            <div class="content-right">
                <p>Lorem ipsum dolor sit, amet consectetur
                    adipisicing elit. Qui, minus, optio atque nostrum 
                repellendus delectus eos non veritatis, 
                illum soluta quas id aliquid facilis molestiae 
                facere nam neque? Fugiat, repellendus.</p>
            </div>
        </div>
        
        
    </div>
</div>

关键修改说明

新增.video-container容器并设置position: relative，为绝对定位的头像提供定位参考
调整头像的bottom和transform属性，实现视频底部居中的叠加效果，同时添加白色边框贴近示例图
放大头像尺寸，优化视觉比例
给图标栏添加flex布局，实现居中排列并增加间距，提升整体美观度

内容的提问来源于stack exchange，提问作者Adamu Abdulkarim Dee