Position the div so that it is aligned with the top offset of another element

Question

Position the div so that it is aligned with the top offset of another element

My question is straightforward. I have a div1 element with a variable offset().top that adjusts based on other elements on the page. I am looking to add an absolutely positioned div next to it, which should have the same absolute top value. This can be achieved using only CSS or with the help of JavaScript as well.

https://i.sstatic.net/WHk4X.png

The HTML structure is as follows

<div>
   <div id="div2">stuff</div>
</div>
<div>
   <div>some divs</div>
   <div id="div1">div1 stuff </div>
</div>

javascript jquery html css

Answer 1

Answer №1

Based on your indication in the comments that you desire to position div2 after it has been added to the DOM, you could experiment with the following approach:

$('#div2').css('top', $('#div1').offset().top - $('#div2').offset().top)

Answer 2

Based on your indication in the comments that you desire to position div2 after it has been added to the DOM, you could experiment with the following approach:

$('#div2').css('top', $('#div1').offset().top - $('#div2').offset().top)

Answer 3

Answer №2

https://i.sstatic.net/gXjuh.png

#container1, #container2 { display:inline-block; }

also

<div id="container3">
  <div>
    <div id="container2">items</div>
  </div>
  <div>
    <div>various containers</div>
    <div id="container1">container1 items </div>
  </div>
</div>

Answer 4

https://i.sstatic.net/gXjuh.png

#container1, #container2 { display:inline-block; }

also

<div id="container3">
  <div>
    <div id="container2">items</div>
  </div>
  <div>
    <div>various containers</div>
    <div id="container1">container1 items </div>
  </div>
</div>

Position the div so that it is aligned with the top offset of another element

Answer №1

Answer №2

Similar questions

What is the best way to add an element before every child in a react jsx render function?

The jQuery function is returning an inaccurate value for the height of

ReactJS Chatkit has not been initialized

An unexpected error has occurred: Uncaught promise rejection with the following message: Assertion error detected - The type provided is not a ComponentType and does not contain the 'ɵcmp' property

Locating the CSS pixel value without being affected by the browser's zoom settings

Creating an anchor tag in ASP

Modify hyperlink address according to chosen option

Is it advantageous to employ several wrapper-divs inside section elements when working with HTML5 and CSS?

While attempting an AJAX request with jQuery, I encountered the following error message: "Error: ER_SP_UNDECLARED_VAR: Undeclared variable: NaN"

I appear to be having issues with the pseudo-element. Is there something I am doing incorrectly? This relates to the first child

PHP Unable to Locate the header.html File Within the Specified Directory

After the initial rendering, JQuery can dynamically search through the DOM elements and seamlessly replace keys with their respective values

The reload/refresh feature for images is not functional

Node.js is able to read an HTML file, but it seems to have trouble locating and loading

Managing arrayBuffer in hapi.js: A Comprehensive Guide

Load the listbox with information retrieved from the database

Retrieve data from an HTML form and utilize it to search a JSON array for a specific value

Guide to modifying the class color using javascript

I'm having trouble getting my HTML POST request form to connect with the Express app.post. Any tips on how to properly pass on numeric variables to a different POST request?

Ways to determine the vertical size of a React component