时间戳

首页 > 解决方案 > 如何修复此进度条上的分层？

html - 如何修复此进度条上的分层？

问题描述

我已经建立了这个进度条，但我需要沿途放置进度标记，但我试图把它放在两个现有层之间。

我尝试了一些 z-index 工作，但我真的不明白。


            #progress {
                background: grey;
                border-radius: 13px;
                height: 20px;
                width: 100%;
                padding: 3px;
            }

            .label-line {
                float: right;
                background: white;
                height:30px;
                width:2px;
                margin-left: 2px;
            }

            .bar-step {
                position:absolute;
                margin-top:-10px;
                font-size:12px;
            }

            #progress::after {
                content: '';
                display: block;
                background: blue;
                width: 50%; /* THIS IS THE ACTUAL PROGRESS */
                height: 100%;
                border-radius: 9px;               
           }

<div id="progress">
                    <div class="bar-step" style="left: 30%">
                            <div class="label-line"></div>
                        </div>
                </div>

白线位于酒吧的最前面。

标签： htmlcss

解决方案

将position: relative和添加z-index到进度条伪元素 ( ::after) 将其放置在标记线上方。

#progress {
                background: grey;
                border-radius: 13px;
                height: 20px;
                width: 100%;
                padding: 3px;
            }

            .label-line {
                float: right;
                background: white;
                height:30px;
                width:2px;
                margin-left: 2px;
            }

            .bar-step {
                position:absolute;
                margin-top:-10px;
                font-size:12px;
            }

            #progress::after {
            
               position: relative; /* this is needed for z-index to work */
               z-index: 3;
               
                content: '';
                display: block;
                background: blue;
                width: 50%; /* THIS IS THE ACTUAL PROGRESS */
                height: 100%;
                border-radius: 9px;               
           }
<div id="progress">
                    <div class="bar-step" style="left: 30%">
                            <div class="label-line"></div>
                        </div>
                </div>

推荐阅读