Position a div relative to another div which is not its parent using CSS

Question

I'm aware of the position:relative and position:absolute trick to position a div relative to its parent. But what if the div is not its parent and I want to position it relative to that? I'm trying to implement something along those lines.

I'm also aware of position:fixed to fix a div but I'm building a responsive website and I'd like to avoid that. I found a question here which mentions using jQuery to do it: How to position one element relative to another with jQuery? Is jQuery the only way to do it? Can it be done using CSS as well?

I've put up a fiddle here: http://jsfiddle.net/19bdpgsf/. In the fiddle, I'm trying to position the child2 element relative to the notparentdivjust like it has been positioned relative to the parent div. Is it possible using only css?

Thanks.

Style

which div you want to position and where – Rh

the child2 div with respect to the notparentdiv just like how it is currently positioned with respect to the parent in the fiddle. I've mentioned that in the question. – Style

jsfiddle.net/19bdpgsf/1 something like this? – Rh

I don't think it is possible using position, perharps display: flex could be worth to consider. – Tribe

Thanks @JanTuroň Think I'll have to go the jQuery way as flexbox support in IE is abysmal. – Style

Answer 1

Another way if you dont want to use css positions use offset jquery as below to position you div

var nonparent = $('.notParent');
var position = nonparent.offset();
$('.child1').offset({
  top: position.top,
  left: position.left
});

.notParent {
  background-color: red;
  padding: 20px;
}
.child2 {
  background-color: yellow;
}
.child1 {
  background-color: green;
}
.parent {
  background-color: purple;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notParent">
  not parent div
</div>
<br/>
<br/>
<br/>
<br/>
<div class="parent">
  parent
  <div class="child1">child1</div>
  <div class="child2">
    child2
  </div>
</div>

You can position a div inside another div which is not parent with absolute relative positions as below

.notParent {
  background-color: red;
  position: relative;
}
.child2 {
  background-color: yellow;
  position: absolute;
  top: 10px;
}
.child1 {
  background-color: green;
  top: 30px;
}
.parent {
  background-color: purple;
}

<div class="notParent">
  not parent div
</div>
<br/>
<br/>
<br/>
<br/>
<div class="parent">
  parent
  <div class="child1">child1</div>
  <div class="child2">
    child2
  </div>
</div>

Rh

Not like that. You just removed the position:relative already existing in the parent div. I don't want that. – Style

Nope :). What if I have other divs relative to that parent div? It'll mess up the styles. – Style

ok i have added one more way to do it with j query offset see if it helps. – Rh

Answer 2

var position = document.getElementById("relative");
document.getElementById("").appendChild(position);

maybe use something like this to move the div into the div you want it in?

This will place a div into the desired div, and from there position:relative; will work.

Broughton

Answer 3

You could use absolute positioning (relative to the entire body of the page), but other than that I don't think there's any other way than jQuery.

Naker

But in my example, position:relative is already applied to the parent div. It'll just ignore the body's position:relative. – Style