Positioning a div beside another div without containing it

Question

Positioning a div beside another div without containing it

Check out the snippet below.

I am looking to vertically center an element, 'modal', over another div, 'element', regardless of its position or margins. However, I cannot place the 'modal' div inside the 'element' div due to restrictions with the react component I am working on. I am wondering if there is a way to position one div relative to another without nesting them. Should I use javascript to detect the position of the 'element' div or are there any pure CSS solutions available? Thank you.

.container {
  border: 2px solid red;
  margin: 5rem;
  height: 20rem;
  width: 20rem;
  position: relative;
}

.element {
  background: pink;
  height: 10rem;
  width: 10rem;
  margin: 3rem;
}

.modal {
  position: absolute;
  background: green;
  height: 2rem;
  width: 2rem;
}

<div class="container">
  <div class="modal" />
  <div class="element" />
</div>

javascript html css

Answer 1

Answer №1

By imposing the condition of "regardless of where it is or what margin it has," the number of possible solutions is significantly limited. In this scenario, a JavaScript solution seems to be the only feasible option.

If both elements share the same offset parent (closest with position: relative), you can develop a function that calculates the center of the .element and adjusts the modal's position based on its dimensions:

// Function to centrally position an element in relation to another
function centerElement(el, rel) {
  var offset = getOffset(el);
  var center = getCenterPoint(rel);
  el.style.top  = center.top  - offset.height / 2 + 'px';
  el.style.left = center.left - offset.width  / 2 + 'px';
}

// Retrieve the central point of an element
function getCenterPoint(el) {
  var elOffset = getOffset(el);
  return {
    top:  elOffset.top  + elOffset.height / 2,
    left: elOffset.left + elOffset.width  / 2
  };
}

// Obtain the offset values of an element
function getOffset(el) {
  return {
    top: el.offsetTop,
    left: el.offsetLeft,
    width: el.offsetWidth,
    height: el.offsetHeight
  };
}

// Example of usage
var element = document.querySelector('.element'),
    modal   = document.querySelector('.modal');

centerElement(modal, element);

.container {
  border: 2px solid red;
  margin: 5rem;
  height: 20rem;
  width: 20rem;
  position: relative;
}

.element {
  background: pink;
  height: 10rem;
  width: 10rem;
  margin: 3rem;
}

.modal {
  position: absolute;
  background: green;
  height: 2rem;
  width: 2rem;
}

<div class="container">
  <div class="modal"></div>
  <div class="element"></div>
</div>

Answer 2

By imposing the condition of "regardless of where it is or what margin it has," the number of possible solutions is significantly limited. In this scenario, a JavaScript solution seems to be the only feasible option.

If both elements share the same offset parent (closest with position: relative), you can develop a function that calculates the center of the .element and adjusts the modal's position based on its dimensions:

// Function to centrally position an element in relation to another
function centerElement(el, rel) {
  var offset = getOffset(el);
  var center = getCenterPoint(rel);
  el.style.top  = center.top  - offset.height / 2 + 'px';
  el.style.left = center.left - offset.width  / 2 + 'px';
}

// Retrieve the central point of an element
function getCenterPoint(el) {
  var elOffset = getOffset(el);
  return {
    top:  elOffset.top  + elOffset.height / 2,
    left: elOffset.left + elOffset.width  / 2
  };
}

// Obtain the offset values of an element
function getOffset(el) {
  return {
    top: el.offsetTop,
    left: el.offsetLeft,
    width: el.offsetWidth,
    height: el.offsetHeight
  };
}

// Example of usage
var element = document.querySelector('.element'),
    modal   = document.querySelector('.modal');

centerElement(modal, element);

.container {
  border: 2px solid red;
  margin: 5rem;
  height: 20rem;
  width: 20rem;
  position: relative;
}

.element {
  background: pink;
  height: 10rem;
  width: 10rem;
  margin: 3rem;
}

.modal {
  position: absolute;
  background: green;
  height: 2rem;
  width: 2rem;
}

<div class="container">
  <div class="modal"></div>
  <div class="element"></div>
</div>

Answer 3

Answer №2

Using CSS-Grid for layout:

.container {
  border: 2px solid red;
  margin: 1rem auto;
  height: 20rem;
  width: 20rem;
  position: relative;
  display:grid;
  place-items:center;
  
}

.modal, .element {
grid-row:1;
grid-column:1;
}

.element {
  background: pink;
  height: 10rem;
  width: 10rem;
  margin: 3rem;
}

.modal {
  background: green;
  height: 2rem;
  width: 2rem;
  z-index:1;
}

<div class="container">
  <div class="modal"></div>
  <div class="element"></div>
</div>

Answer 4

Using CSS-Grid for layout:

.container {
  border: 2px solid red;
  margin: 1rem auto;
  height: 20rem;
  width: 20rem;
  position: relative;
  display:grid;
  place-items:center;
  
}

.modal, .element {
grid-row:1;
grid-column:1;
}

.element {
  background: pink;
  height: 10rem;
  width: 10rem;
  margin: 3rem;
}

.modal {
  background: green;
  height: 2rem;
  width: 2rem;
  z-index:1;
}

<div class="container">
  <div class="modal"></div>
  <div class="element"></div>
</div>

Positioning a div beside another div without containing it

Answer №1

Answer №2

Similar questions

Issue with Ajax function's communication with server

Redirect user if the parameter does not match the corresponding ID in the database using React Router V4

An issue arises with an unterminated string literal whenever I attempt to click on an anchor

Is a middleware function required for Router.use?

Unexpected malfunction in CSS Grid within Flexbox layout

Step-by-step guide to creating a clickable div

Unitary Individuals and the Connection Automation

What is the process for the Rebol programming language to independently implement an asynchronous pluggable protocol for reading

Querying Mysql Data using Select Statement in Node.js

How can I replicate the function of closing a tab or instance in a web browser using Protractor/Selenium?

Sending data to a function that is generated dynamically within a loop

Creating a custom date format in JavaScript can easily be achieved

Having trouble displaying options in VueJS Component using datalist

The node.js server is unresponsive and seems to be offline

The share-modal.js file is throwing an error because it is unable to read properties of null, particularly the 'addEventListener' property, at

Is there a way to minimize superfluous re-renders in React without resorting to the useMemo hook?

Client.on facing issue with receiving data upon initial connection

Fastify Node - delivering images from the upload directory

conducting a validation using ajax when submitting

XML and numerous, distinct DIV elements