Question

我已经建立了这个进度条，但是我需要在整个过程中放置进度标记，但是我试图将其放置在两个现有层之间。

我已经尝试了一些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>

白线在栏的最前面。

Answer 1

将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>

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

1 个答案: