圖像下但在背景下的垂直線

Question

正如標題中所提到的，我想在圖像下方的中心，背景下方製作垂直線（就像本例中：http://www.akita.co.uk/computing-history/#decade2000）。我該怎麼做？謝謝。

Answer 1

你可以用僞元素achief這一點。我會用一個快速筆向你展示如何，但基本上，你只需給圖像指定一個2的z-index，僞元素父對象的z-index爲1，那麼你就很好。

請記住，Z索引是從父項繼承的。因此，通過使用該-1你說僞元件上，取母體z索引（2），並從該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-index筆中的示例：http://codepen.io/jan-dh/pen/VjOEyq?editors=1100#0

Answer 2

你不能通過使用CSS來設置圖像的Z-index嗎？設置較高的z-index會將其放在頁面上所有其他元素的前面。

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