json file renders under another json

I have 2 json files loaded into the same page. One json is always showing behind the other json. I want to swap them. Below is a part of the code… The lottie container always renders on top of the emoji_1,

#emoji_1{
 	    background-color:#fff;
            width: 50%;
            height: 50%;
            display:inline-block;
            overflow: visible;
            opacity: 1;
			
	    position: absolute;
	    left: 50%;
	    transform: translate3d(-50%, 50%, 0);
        }
#lottie{
            background-color:#fff;
            width:100%;
            height:100%;
            display:inline-block;
            overflow: visible;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }

<div>
	<div id="emoji_1"></div>
	<div id="lottie"> </div>

</div>

anim0 = lottie.loadAnimation(params0); anim1 = lottie.loadAnimation(params1);

[kiriss91]

Thanks. Try assigning z-index: 100; to your emoji. All you want is for it to appear above, correct? I did it this simply, but the emoji has a white background which now covers the main file. Might be best for you to rerender that bg with a class name, then set fill: transparent; on it. Is that what you’re after?

yes, that works perfectly, thanks

[Inventsable]

Thanks. Try assigning z-index: 100; to your emoji. All you want is for it to appear above, correct? I did it this simply, but the emoji has a white background which now covers the main file. Might be best for you to rerender that bg with a class name, then set fill: transparent; on it. Is that what you’re after?