place a div beneath a different element

Is there a way to position a div below another element without impacting the layout of the rest of the content?

<div style="margin:50px">
    <div style="margin:20px; padding:10px; width:100px">
        This is a small <span id="test" style="font-weight:bold">test</span>.. some text some text some text some text
    </div>
</div>
<script>
    var elm = document.getElementById('test');
    var newDiv = elm.appendChild(document.createElement('div'));
    with(newDiv){
        style.position = 'relative';
        style.left = elm.offsetLeft+'px';
        style.background = '#ffffff';
        style.width = '100px';
        style.height = '50px';

        innerHTML = 'wooop';
    }
</script>

Answer №1

To control the stacking order of elements on a webpage, you can use either the css property z-index or the javascript style property zIndex.

The z-index property determines the vertical position of a layer. The default z-index for the canvas element (usually the body tag) is 0. Elements with higher z-index values will appear above those with lower values.

Here is an example using CSS:

<style type="text/css">
.my_layer {
  display: block; 
  position: absolute; 
  z-index: 10; 
  top: 10px; 
  left: 10px; 
  width: 100px; 
  height: 100px;
}
</style>

And here is an example using JavaScript:

<script type="text/javascript">
  let el = document.getElementById("my_div");
  with(el.style){
    zIndex = 10;
    display = "block"; 
    position = "absolute"; 
    top = "10px"; 
    left = "10px"; 
    width = "100px"; 
    height = "100px";
  }
</script>

Answer №2

elm.style.left = elm.offsetLeft + "px";

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

What is the best way to define a variable that captures and logs the values from multiple input variables?

Hey there, I'm a new coder working on a shopping list app. I'm trying to display the input from three fields - "item", "store", and "date" - at the bottom of the page as a single line item. I attempted to do this by creating a variable called "t ...

"Usage of Wildcard in CSS Selectors for customizable path selection

When it comes to identifying elements using CSS selectors, I rely on a combination of path and attribute-based selectors for accurate results. For instance: div[attribute='test'] > div > div > div > span[attribute='test'] ...

The datepicker feature mysteriously vanishes when using Safari browser

When I utilize the jquery ui datepicker (range) and open my datepicker, if I scroll down the page, the calendar disappears. This issue seems to only occur on Safari browsers with mobile devices. Has anyone else experienced this problem? Would someone be ...

Getting rid of the outline on <html> while tabbing in Firefox

An odd outline keeps appearing as I tab through elements on a website, but only in Firefox and not in Chrome, Safari, or Opera. To identify the element causing the focus, I used Firebug console by typing: document.activeElement. It showed: >>> d ...

Does adjusting the background transparency in IE8 for a TD result in border removal?

I attempted to create a JSFiddle, but it was not coming together as expected. My goal is to change the color of table cells when hovered over. I have been trying to adjust the opacity of the background color for this effect, but I encountered some strange ...

Guide on implementing CSS modules in a WordPress plugin built with React

Within one of my tsx files, I included this line: import styles from "../../styles/buyTicket.module.css"; This resulted in the following error message: ERROR in /Applications/MAMP/htdocs/wp-content/plugins/tikex/tikexModule/components/BuyTicket/ ...

Tips for making sure custom fonts are loaded before running any JavaScript code

Upon loading my page, I run a JavaScript function to determine if specific text fits within its parent div. If it doesn't fit, then adjustments must be made. The text is styled with a custom font, which can be loaded either through @font-face or Goog ...

adjustable canvas dimensions determined by chosen images

I would like to create a canvas image based on the selected image <canvas id="canvas" ></canvas> <input type="file" id="file-input"> Using JavaScript: $(function() { $('#file-input').change(function(e) { var file ...

Can the font size of a container be adjusted proportionally to its width or height using only CSS?

When it comes to ensuring that the font always fits nicely within its container, I rely on using Javascript to set divs or specific class to have their font-size dynamically equal to their width, and adjust their inner text elements accordingly. If you wa ...

Mobile devices not responding to media queries properly

My website has different sets of CSS styles for various screen sizes: (1) @media only screen and (max-width: 566px) { (2) @media only screen and (min-width: 567px) and (max-width: 767px) { (3) @media only screen and (min-width: 768px) and (max-width: 999 ...

What is the best way to shorten text in React/CSS or Material UI based on the line height multiples?

I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this? Here's the code snippet I&a ...

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

The canvas surpasses the boundaries of the grid layout

Trying to design a grid layout with 3 columns of content, alongside an .overlay div featuring a particles.js canvas. Having trouble? See my Codepen here: https://codepen.io/radzak/pen/MVQVPQ The goal is for the grid to always occupy 100% of the screen, t ...

Using Angular 8 to Pass Form Data to Another Component via a Service

Is there a way to send all the Formgroup data as a Service in Angular to Another Component without using ControlValueAccessor? I want the receiver to automatically receive the value data whenever someone enters information on a form. I am attempting to mo ...

What causes discrepancies in CSS design across different browsers?

I have implemented the following CSS and HTML code to display an L shape before a span, but its appearance differs across different browsers. In Mozilla Firefox https://i.sstatic.net/1rCoJ.png and In Safari https://i.sstatic.net/YKiJ7.png .bulletInli ...

Obtaining specific data from the forEach iteration, post-click event with JavaScript

Trying to access the value from a Tree-structured Array of Objects stored in Local Storage, https://i.sstatic.net/YJ1PI.png Created a function that retrieves values from local storage using forEach and displays them on the screen. https://i.sstatic.net/ ...

Struggling with getting basic CSS to work with React's MUI framework

I've been attempting to incorporate basic CSS with MUI components. According to their website, it should be feasible. https://material-ui.com/guides/interoperability/#plain-css But unfortunately, I'm having trouble getting it to function prope ...

Avoiding the application of a border-right to the final child of a div in CSS

Check out this custom HTML code: <div class="main"> <div class="parent"> <div class="child"> <span></span> <label></label> </div> <div class="child2"> // some html content </div> ...

How to Style Bootstrap 4 Tables with Rounded Borders

Currently, I am in the process of enhancing the design of a Bootstrap 4 table within a Node application using handlebars (.hbs). While I have been able to adjust the width of the table with CSS, I am encountering challenges in creating the desired borders ...