画像の下にある背景の上に縦線があります。

Question

タイトルに記載されているように、画像の下で背景の上に縦線を作りたいとします（この例のように：http://www.akita.co.uk/computing-history/#decade2000）。どうしたらいいですか？ありがとう。

Answer 1

あなたは擬似要素でこれをachiefことができます。私は素早くペンを描いて、基本的には、イメージに2のZ-​​インデックスを与え、擬似要素の親には1のZ-インデックスを与え、あなたは良いことを示します。

Zインデックスは親から継承されています。だから、使用して-1を擬似要素上であなたはそれから親のzインデックス（2）、及びsubstract 1を取る、と言っているので、あなたは1

.image{ 
    position:relative; 
    z-index:2; 
    width:200px; 
    height:200px; 
    margin:0 auto; 
    padding-top:100px; 
    &::before{ 
    content:''; 
    position:absolute; 
    width:1px; 
    height:300px; 
    top:0; 
    left:50%; 
    background:red; 
    z-index:-1; 
    } 
} 

のzインデックスで終わりますペンの例：http://codepen.io/jan-dh/pen/VjOEyq?editors=1100#0

Answer 2

CSSを使用して画像のZ-インデックスを設定することはできませんか？高いZインデックスを設定すると、ページの他のすべての要素の前面に表示されます。

http://www.w3schools.com/cssref/pr_pos_z-index.asp