Overlap a div on top of another element

HTML & CSS
1

I have

image
image1920×1080 107 KB

Im trying to place the vertical menu so that the other element (which is a SVG) is not pushed down and instead sort of ignores it and starts at the top of the tab.
Heres the markup soo far.

<div class="tab" style="padding:10px;">
  <div class="list-group" style="width:25%;float: right;">
  <a href="power_paths/Comms_Room.php" class="list-group-item list-group-item-action">Comms Room</a>
  <a href="power_paths/Crypto_Room.php" class="list-group-item list-group-item-action">Crypto Room</a>
  <a href="power_paths/Data_Center.php" class="list-group-item list-group-item-action">Data Center</a>
  <a href="power_paths/Server_Room.php" class="list-group-item list-group-item-action">Server Room</a>
  <a href="power_paths/Tech Control.php" class="list-group-item list-group-item-action">Tech Control</a>
  <a href="power_paths/Watch Floor.php" class="list-group-item list-group-item-action">Watch Floor</a>
  </div>

  <svg viewbox="0 0 1000 550" version="1.1"
....
</div>
2

Could you pop what you have in a Codepen maybe? Much easier to understand what you’re trying to achieve and give you a good answer.

2 Likes
3

You could place your menu after the svg element, position it to be relative and then pull and push it into place with margins so that it sits over the svg element. This gives you the effect of a floating element that will be independent of the element under it.

Here is an example of the little gray square floating over an image (yours could be the svg) that I have set with a background image and scrollable. Notice you can scroll and interact with the element without interacting with the square.

Hopefully this is what you were talking about.

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.