Search code examples
javascripthtmlcsssvgz-index

Drawing elements on top of elements loaded by js

Novice here!

I downloaded and used a template for my portfolio site. While trying to tweak it, I decided I wanted to draw one element overlapping the one immediately below it. I tried several things, such as changing the z-indices of the elements and their children like so

.bottom-element, .bottom-element * {
  z-index: 1;
}

.top-element, .top-element * {
  z-index: 2;
}

I think the real problem has to do with the javascript files that were included with template. The top element that i want to do the overlapping is an svg path that acts as a fancy border for a content div, and the part i wanted to be overlapped is fancy gallery that is controlled by js(image of the problem area). I am guessing that the scripts run and load the images after the initial html/css files are done? (Don't know much about it!)

Is there a way to make the svg draw over the gallery thumbnails? Or is it too complex and I shouldn't bother?

Solution

  • z-index only works on positioned elements (position:absolute, position:relative, or position:fixed) so make sure you have that first.

    Usually you add the relative as it won't actually change it's position unless you are giving it positional values.