[sugarcube2] How to layer image on top of eachother in the UI bar?

Question

I have a player image that I want to have clothing images and such to be able to be layered on the frame of the empty Player model. I have the image in the "StoryCaption" passage and gave it an imgClasss but I don't know what to do from there.

I read this: http://twinery.org/questions/962/how-can-we-layer-images-in-sugarcube-2-18 but i couldn't get it to line up properly.

Edit: So I used the steps from above but now the images are on top of the text and buttons. And it's not properly in the side bar, it's kinda on top of the line between the side bar and the game screen.

here's my code:
 

<div id="playerimg">

<img class="layer0" 

src=" "
>
<img class="layer1" 

src=" "
>
</div>

and my CSS:

#playerimg {
	position: relative;
	display: block;
	width: 100%;
	height: 100px;
	overflow: hidden;
  	
}
#playerimg  img{
	position: absolute;
	z-index: 0;
}
#playerimg .layer0 {
	z-index: 10;
  	
}
#playerimg .layer1 {
	z-index: 20;
}
#playerimg .layer2 {
	z-index: 30;
}

 

Answer 1

Please use the Question Tags to state the name and full version number of your Story Format, adding that information to the Question Title just makes it unnecessary long with little actual value.

Both of the methods described in the linked question are basically doing the same thing, although they used slightly different implementations.

1. They use a parent HTML div element to define the overall visual area in which all of the layered images will be displayed in. This is done by styling (using CSS) this div as position: relative; with set width and height values.

2. Add child HTML img elements (images) to that parent and then styling them as position: absolute; which makes any CSS positioning related property (like top, left, bottom, & right) assigned to the img elements to be in relation to the visual area of the parent
note: TheMadExile's example also uses the CSS z-index property to control what happens when two images overlap, it determines who covers who.

You would use the values assigned to CSS positioning related properties of child img element to move it around the parent's visual area.

Without seeing your actual code and knowing the exactl layout you want to achieve it is difficult to suggest a more detailed answer.

Comments

Thanks, I think I get it now. Sorry for the lack of tagging, I'm new to all of this