How to add HTML elements within cesium viewer?

I am new to HTML & Cesium, but I was wondering if it is possible to add html elements inside of the viewer, for example adding a searchbar above the globe or something. I have a div with id=cesiumContainer, but if I add any elements inside that div, they just get placed above the viewer instead of inside.

Hi @jonbonboy,

welcome to the world of HTML and JavaScript! :wink:
I would advise you to do some tutorials for HTML+CSS.
Very helpful sites are https://www.w3schools.com/html/default.asp and https://www.w3schools.com/css/default.asp.

On your “problem”:
Play around with the style of your div. To be more precise, experiment with the statements “position”, “left”, “right” etc. It is not required to create your div inside “cesiumContainer” btw.

Best, Lennart

So I figured out how to place an element inside the viewer, but for some reason it’s always hidden even though when I inspect element it shows that it is indeed inside?

@jonbonboy
That’s because HTML elements get “drawn on top of each other” in the same order they are in your html-document (or are created with JS). You can either assign “z-index” values inside “style” or put your div under/after the cesiumContainer

1 Like

@lennart.imberg’s suggestions are on point here!

One other quick thing worth mentioning - many community members that feel more comfortable with React turn to Resium. More info here: