Question

As mentioned in the title, I want to make a vertical line in the center, under an image but over a background (just like in this example: http://www.akita.co.uk/computing-history/#decade2000). How can I do it? Thanks.

Answer 1

您可以使用伪元素实现此目的。我将快速制作一支笔来向您展示如何但基本上，您只需为图像指定z-index为2，伪元素父项为z-index为1，您就可以了。

请记住，Z-index是从父级继承的。因此，通过在伪元素上使用-1，取父级z-index（2），并从中减去1，所以最终得到的z-index为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;
  }
}

笔中的示例：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

Vertical line under an image but over a background

2 个答案: