Issue with displaying image element over another element

I recently encountered a unique challenge with my SVG element, which acts as a container for a chessboard I developed. In certain key moments of the game, such as when a pawn is promoted and a player needs to choose a new piece, I found it necessary to have an interactive component pop up. The catch is that this component cannot be stored as a child of the chessboard container because the chessboard must remain disabled while the player makes their selection. As a solution, I decided to create an IMG element containing all the selectable pieces. By overlaying the IMG element on top of the SVG element using position:absolute and top/left properties, I was able to achieve the desired functionality. Additionally, I attached an eventListener to the document itself, disabling the listener once the player has made their selection. If there are no bugs in my code, is this approach viable?

Below is a simplified version of the code, albeit one that does not work:

Imagine the blue square represents the chess board:

<html>
  <body>
    <h1>The img element</h1>

    <svg id = "cont" width = "500" height = "600">
      <rect width = "500" height = "600" style = "fill:blue">
    </svg>

    <script>
      var im = document.createElement("img");
      im.src = "img_girl.jpg";
      im.width = "250";
      im.height = "300;
      im.style = "position: absolute; top: 100px; left: 100px";
      document.body.appendChild(im);
    </script>

  </body>
</html>

Answer №1

Absolutely, it is definitely possible for elements to overlap on a webpage. The hierarchy of which element appears on top can be controlled using the CSS property z-index, and if two elements have the same z-index value, then their order in the document will determine their stacking order. Keep in mind that while the chessboard container may prevent individual pieces from interacting with other elements, you can still overlay new elements on top of it.

However, I would advise against using a single IMG element as a menu. There are more suitable HTML elements specifically designed for creating menus that would provide better functionality and accessibility.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

the value contained in a variable can be accessed using the keyword "THIS"

I recently developed a snippet of code that adds a method to a primitive data type. The objective was to add 10 to a specified number. Initially, I had my doubts about its success and wrote this+10. Surprisingly, the output was 15, which turned out to be ...

Use the controller to set the body's background image

Seeking help to update the image URL within the CSS code snippet provided. I would like to accomplish this from the controller and can work with either LESS or SCSS. Is there a solution for this? .background{ height: 100%; width: 100%; backg ...

Customizing Drop Down Button in React Material-UI with Conditions

Trying to figure out how to dynamically populate the second MUI dropdown based on the selection from the first dropdown. Currently, I have both dropdown lists hardcoded. const [queryType, setqueryType] = React.useState(''); const [subCategory, se ...

Innovative concepts for designing web applications

Here's a unique situation that requires some brainstorming. I'm looking for any advice or suggestions. Imagine a tennis court equipped with sensors throughout - the net, lines, everything has sensors built in. These sensors are constantly sending ...

Arrange divs in vertical columns

My markup is fixed and I am only allowed to add <div> elements to the container. Here is the current structure: <div class="container"> <div class="box" id="box1">1</div> <div class="box" id="box2">2</div> < ...

Initiating Firebase Configuration

Currently, I have integrated Firebase as the back-end for my app. Here is how my firebase configuration looks: const firebaseConfig = { apiKey: 'xx', authDomain: "xx", databaseURL: "xx", ...

What is the process for adding an image to a designated directory using multer?

As a student working on a project to develop a simple website, I am faced with the challenge of enabling users to create listings and upload pictures akin to platforms like eBay. Additionally, I aim to incorporate user profile creation where images can be ...

When the enter key is pressed in a contenteditable div, line breaks are disregarded

Is there a way to ensure that when the return key is pressed to start a new line for a post, the output actually starts on a new line? I've been having trouble with this and would like to know the most common solution. Check out the demo below for te ...

Merging HTML Array with jQuery

I am working with input fields of type text in the following code snippet: <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > <input type="text" minlength="1" maxlength="1" class="myinputs" name="myinputs[]" > ...

Issues with the FlexBox styling of Bootstrap 4 Modals in Internet Explorer causing malfunction

I have designed a confirmation dialog using Bootstrap 4 with the following code snippet: <div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;"> <div class="modal-dialog"> <div class="modal-co ...

Tips for getting the setTimeout() function to behave like a for loop

Is there a way to achieve the setTimeout() function's behavior in a for-loop? Take a look at this code snippet: function hello() { for (let index = 0; index < 3; index++) { setTimeout(function () { console.log('What&bs ...

Logging into Facebook using Angular 2

As I work on developing a website that requires users to log in with their Facebook account, I am facing some challenges. I am utilizing Angular 2 and TypeScript for this project, but the user information retrieval is not working as expected. Let's d ...

Challenge with executing javascript library (photo sphere viewer)

I was excited to incorporate Photo Sphere Viewer into my project. After running npm i photo-sphere-viewer I noticed that the modules were successfully downloaded. Following that, I added this line inside my project: import PhotoSphereViewer from ' ...

Unable to pass parameters using ViewBag in jQuery within a partial view

Currently, I am in the process of building an MVC3 application with razor syntax. My focus right now is on developing the partial class that will be responsible for handling comments. This is a snippet of my code: <script src="../../Scripts/jquery.js" ...

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Is there a way to ensure that an image within nested flex containers has a width of 100% in IE11, even when the container has flex-direction: column? I've tried setting the width to 100% with a max-width of calc(100% - 0.1px), but unfortunately it doe ...

Experimenting with Angular using a template that includes a mat-toolbar

Currently, I am in the process of writing tests for my Angular application. Here is a snippet of the template used in my AppComponent: <mat-toolbar color="primary"> <span>CRUD Exercise</span> <span class="example-spa ...

An error occurred while trying to access the object null in React-Native, specifically when evaluating 'this.state.token'

I encountered an error while trying to execute a class in a view: When running the class, I received the following error message: null is not an object (evaluating 'this.state.token') The problematic class that I'm attempting to render: c ...

Aligning the page content in perfect harmony with the footer

I've encountered variations of this question in the past, but I haven't found a solution that fits my specific needs. My challenge involves having a footer fixed at the bottom of a page, even when the content doesn't fill the entire page. Ad ...

using single quotation marks for string keys in a JavaScript object

While working with nodejs, I encountered an issue when creating a list of objects with string keys and numbers as values. Upon logging the list using console.log(), I noticed that some keys had single quotes surrounding them while others did not. For exam ...

Today's Date Bootstrap Form

How can I show today's date in a Bootstrap form with the input type set to 'date' and another input with the type set to 'time'? Most solutions I've found involve changing the input type to 'text'. Is there a way to ...