NewHTML NewHTML - 26 days ago 6
CSS Question

How to get an image above a border

Here is what I want : enter image description here

To get the bar, I'm using a border-left, and to get the bullet an image.
However, the bullet image is behind the bar.

How could I get the bullet image above the border-left ?

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


I tried something with z-index but it does not work.

Answer Source

Use a relative position for the element that has the border and absolute positions with according position settings for the images. The image has to be a direct child of the element with the border for this code to work properly:

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

(values as needed, use IDs or classes to address different images)