Does Vaadin have layers where I can set components in front or back?

Just as Microsoft Power Point, I can set pictures back, in front or someting in the middle.
Can I do that in Vaadin?

I know how to set background pictures with CSS. No problem there.
But I want to set a picture, on a picture, onto a picture and so on. Then I want to disable/enable or change the transparency.
So I’m looking for some kind of way to place Vaadin images objects onto each other, or at least touching each other.

Is that possible?

(I’m going to create an animation with gif pictures where I can run and stop pictures just by clicking on certain buttons)

Do you think that I should use a simple VerticalLayer/HorizontalLayer/AppLayout etc and change the CSS class name depending on what I want to do?

.myPictures{
  Here is two pictures
}

.myGifPicture{
  Here is a gif picture
}

Then I use the method myLayout.setClassName("myPictures") when I want to use pictures only and then I need to change to myLayout.setClassName("myGifPicture") when I want to use a gif picture instead? Is that a proper way to do it?

CSS is the way to go.

Set position: relative; on a container and then position: absolute; on the images placed inside the container. z-index can then be used to define the stack order.

Joacim Päivärinne:
CSS is the way to go.

Set position: relative; on a container and then position: absolute; on the images placed inside the container. z-index can then be used to define the stack order.

Thank you.

I used this:

.stekpanna_gif{
	background-image: url(img/stekpanna.gif);
	height: 100%;
	background-repeat: no-repeat;
	/*background-position: center center;
	background-size: 1450px 100%;*/
}

.stekpanna_png{
	background-image: url(img/spekpanna_stilla.png);
	height: 100%;
	background-repeat: no-repeat;
}

And the Java code for appLayout

		// Test
		VerticalLayout content = new VerticalLayout();
		content.setClassName("stekpanna_png");
		Button button = new Button(START);
		button.setClassName("startStop");
		button.addClickListener(e -> {
			if(button.getText().equals(START)) {
				content.setClassName("stekpanna_gif");
				button.setText(STOP);
			}else {
				content.setClassName("stekpanna_png");
				button.setText(START);
			}
		});
		content.add(button);
		setContent(content);

So when I click on “Start” then the animation will run. If I press “Stop”, then the animation turns to a fixed picture of same type.


18199253.png
18199256.png