2016-05-12 4 views
0

私はこのプログレスバーを持っていて、それが<header>の外側にあるときは、ステップ間の線が表示されていますが、z-indexのために、<header>のタグの線は表示されません。このよう :enter image description hereプログレスバーの行が消えるCSS

私は、行はこのようにボックスを経由z-indexを変更する場合: enter image description here

私はこの回避策があるかどう知っているが、あなたが任意のアイデアを持っている場合は、私に聞かせてくださいません知っている!

関連部品のための私のコード:

body { 
 
    background: #000; 
 
} 
 

 
header { 
 
    background-image: url("http://texturemate.com/image/view/1560/_original"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    padding: 0; 
 
} 
 

 
/*form styles*/ 
 
    #msform { 
 
     width: 400px; 
 
     margin: 50px auto; 
 
     text-align: center; 
 
     position: relative; 
 
    } 
 

 
    /*progressbar*/ 
 
    #progressbar { 
 
     margin-bottom: 30px; 
 
     overflow: hidden; 
 
     /*CSS counters to number the steps*/ 
 
     counter-reset: step; 
 
    } 
 
    #progressbar li { 
 
     list-style-type: none; 
 
     color: white; 
 
     text-transform: uppercase; 
 
     font-size: 9px; 
 
     width: 33.33%; 
 
     float: left; 
 
     position: relative; 
 
    } 
 
    #progressbar li:before { 
 
     content: counter(step); 
 
     counter-increment: step; 
 
     width: 50px; 
 
     line-height: 50px; 
 
     display: block; 
 
     font-size: 10px; 
 
     color: #333; 
 
     background: white; 
 
     border-radius: 50%; 
 
     margin: 0 auto 5px auto; 
 
    } 
 
    /*progressbar connectors*/ 
 
    #progressbar li:after { 
 
     content: ''; 
 
     width: 100%; 
 
     height: 2px; 
 
     background: white; 
 
     position: absolute; 
 
     left: -50%; 
 
     top: 25px; 
 
     z-index: -1; /*put it behind the numbers*/ 
 
    } 
 
    #progressbar li:first-child:after { 
 
     /*connector not needed before the first step*/ 
 
     content: none; 
 
    } 
 
    /*marking active/completed steps green*/ 
 
    /*The number of the step and the connector before it = green*/ 
 
    #progressbar li.active:before, #progressbar li.active:after{ 
 
     background: #27AE60; 
 
     color: white; 
 
    }
<header> 
 
    <div class="container"> 
 
     <div class="navbar"> 
 
      <div class="navbar-brand"> 
 
       <a href="/" id="logo" class="logo" alt="Home"> 
 
        <img src="logo.png" class="hidden-sm"/> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-12 progressbar"> 
 
       <form id="msform"> 
 
        <!-- progressbar --> 
 
        <ul id="progressbar"> 
 
         <li class="active">Account Setup</li> 
 
         <li>Social Profiles</li> 
 
         <li>Personal Details</li> 
 
        </ul> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</header>

+0

それが問題を示しているように、あなたはあなたの例のコードを編集することはできますか?あなたのコードには 'header'要素さえありません。 – Turnip

+0

'z-index'でさらに暗い背景を送信しない理由はありますか? – Nitesh

+0

ヘッダー要素をコードに追加しました@Turnip – teninchhero

答えて

0

あなたはその後、中央からではなく、円の外側の境界線から(円の間にそれを置くためにLeft位置を調整するラインのwidthを減らすことができます)、また、行にはz-index: 1を設定することを忘れないでください。このような

何か:

body { 
 
    background: #000; 
 
} 
 

 
header { 
 
    background-image: url("http://www.solidbackgrounds.com/images/2880x1800/2880x1800-air-force-dark-blue-solid-color-background.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    padding: 0; 
 
} 
 

 
/*form styles*/ 
 
#msform { 
 
    width: 400px; 
 
    margin: 50px auto; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
/*progressbar*/ 
 
#progressbar { 
 
    margin-bottom: 30px; 
 
    overflow: hidden; 
 
    /*CSS counters to number the steps*/ 
 
    counter-reset: step; 
 
} 
 

 
#progressbar li { 
 
    list-style-type: none; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-size: 9px; 
 
    width: 33.33%; 
 
    float: left; 
 
    position: relative; 
 
} 
 

 
#progressbar li:before { 
 
    content: counter(step); 
 
    counter-increment: step; 
 
    width: 50px; 
 
    line-height: 50px; 
 
    display: block; 
 
    font-size: 10px; 
 
    color: #333; 
 
    background: white; 
 
    border-radius: 50%; 
 
    margin: 0 auto 5px auto; 
 
} 
 

 
/*progressbar connectors*/ 
 
#progressbar li:after { 
 
    content: ''; 
 
    width: 60%; /* Changed */ 
 
    height: 2px; 
 
    background: white; 
 
    position: absolute; 
 
    left: -30%; /* Changed */ 
 
    top: 25px; 
 
    z-index: 1; /* Changed */ 
 
} 
 

 
#progressbar li:first-child:after { 
 
    /*connector not needed before the first step*/ 
 
    content: none; 
 
} 
 

 
/*marking active/completed steps green*/ 
 
/*The number of the step and the connector before it = green*/ 
 
#progressbar li.active:before, #progressbar li.active:after{ 
 
    background: #27AE60; 
 
    color: white; 
 
}
<header> 
 
    <div class="container"> 
 
     <div class="navbar"> 
 
      <div class="navbar-brand"> 
 
       <a href="/" id="logo" class="logo" alt="Home"> 
 
       <img src="logo.png" class="hidden-sm"/> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
      <div class="col-md-12 progressbar"> 
 
       <form id="msform"> 
 
        <!-- progressbar --> 
 
        <ul id="progressbar"> 
 
         <li class="active">Account Setup</li> 
 
         <li>Social Profiles</li> 
 
         <li>Personal Details</li> 
 
        </ul> 
 
       </form> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</header>

関連する問題