css - 如何在边框上方获取图像

Question

这是我想要的:enter image description here

为了获得条形图，我使用了左边框，并为了获得元素符号图像。 但是，元素符号图像在栏后面。

我怎样才能得到 border-left 上方的元素符号图像？

`<div id="verticalbar">
`...<p class = "g"><img id="bullet" src="bullet.png"/><b>Somethinghere</b></p> ...</div`>

我用 z-index 尝试了一些东西，但它不起作用。

Answer 1

为具有边框的元素使用相对位置，并根据图像的位置设置使用绝对位置。图像必须是带边框元素的直接子元素，此代码才能正常工作:

p.g {
  position: relative;
  border-left: 1px solidblack;
}
p.g. > img {
  position: absolute;
  left: -6px;
  top: 24px; 
}

(根据需要取值，使用ID或class来处理不同的图片)