CODEWITHSUNDEEP
javascripthtmlcsssvg
Akbar Basha
Akbar Basha

Reputation: 1198

How to show the element using z index

I have created a simple div and svg..

#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 80px;
  left: 55px;
  top: 20px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  pointer-events: all;
}
<div>
  <div id='firstElement'></div>
  <svg>
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>

The firstElement(ID) is not visible even if I set the z-index.

My expected output is, border -> firstElement -> circle

enter image description here

how to acheive this?

Upvotes: 0

Views: 121

Answers (4)

Rithwik
Rithwik

Reputation: 1198

Solution: Remove the <rect> tag inside the <svg>.

Issue: The problem is in your <svg> you are applying a rectangle (<rect>) around the <circle> which is has height="100" width="200" and fill="white". If you simply change opacity="0", then the #firstElement div becomes visible behind the circle. I am not sure why you have included that <rect> in the first place.

The whole <svg> tag is one single unit, so the elements in it have the same z-index. You cannot insert a <div> in between the elements of an <svg> by using z-index. You will have to split the <svg> elements into two for that.

#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 100px;
  left: 57px;
  top: 10px;
  z-index: -1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  pointer-events: all;
}
<div>
  <div id='firstElement'></div>
  <svg>
  <!-- <rect id="border" y="0" x="0" height="100" width="200" opacity="0" fill="white" stroke="#DDDDDD" stroke-width="0"></rect> -->
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>

Upvotes: 2

Shubham
Shubham

Reputation: 285

You don't need to add any thing except SVG code.

<svg>
  <rect id="border" y="0" x="0" height="150" width="200" opacity="1" fill="white" stroke="#000" stroke-width="1"></rect>
  <rect id="border" y="25" x="50" height="100" width="100" opacity="1" fill="red" stroke="#DDDDDD" stroke-width="0"></rect>
  <circle id="circle" cx="100" cy="75" r="40" fill="lime" />
</svg>

Upvotes: 1

Mahfud Harun
Mahfud Harun

Reputation: 947

You can move your firstElement into svg using foreignObject

#firstElement {
  background-color:red;
  width: 100px;
  height: 80px;
}
svg {
    width: 100%;
    height: 100%;
    stroke: black;
    stroke-width:2px;
    pointer-events: all;
}
<div>
<svg>
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
  <foreignObject x="50" y="10">
    <div id="firstElement"></div>
  </foreignObject>
  <circle id="circle" cx="100" cy="50" r="40" fill="lime"></circle>
</svg>
</div>

Upvotes: 2

Zsolt Medgyesi
Zsolt Medgyesi

Reputation: 169

Put the drawings in different svg tags, position svg's absolute, give them z-indexes.

#firstElement {
  background-color: red;
  position: absolute;
  width: 100px;
  height: 80px;
  left: 55px;
  top: 20px;
  z-index: 1;
}

svg {
  width: 100%;
  height: 100%;
  stroke: black;
  stroke-width: 2px;
  position: absolute;
  pointer-events: all;
}
#svgRect {
  z-index:0;
}
#svgCircle {
 z-index:2;
}
<div>
  <div id='firstElement'></div>
  <svg id="svgRect">
  <rect id="border" y="0" x="0" height="100" width="200" opacity="1" fill="white" stroke="#DDDDDD" stroke-width="0"></rect>
</svg>
<svg id="svgCircle">
  <circle id="circle" cx="100" cy="50" r="40" fill="lime" />
</svg>
</div>

Upvotes: 0

Related Questions