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

position an element relative to another element from anywhere in the dom
css element position relative to another element
css position: relative to parent
position div below another div with position: absolute
css position something relative to another element
how to align one element with another css
css position within another element
position element target

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.


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>

How to use the position property in CSS to align elements, Using CSS float, display and position properties are the most common methods. In this article, I I also have another tutorial for CSS Display Property here. Your browser does not currently recognize any of the video formats available. However, an absolutely positioned element is relative to its parent. 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


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.

Fix position of div with respect to another div - HTML & CSS, for thhis there is no fixed class --> </div> </body> now you CAN position in relation to the parent by setting position:relative on the parent. As the parent is not absolutely positioned, it will appear in the default top left position. The child however still has it’s absolute positioning set to the top right, so it is positioned relative to the next parent div that has position:absolute; or position: relative. In this case, the next parent container div is the grandparent. The HTML


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>

Position an element relatively to another element from anywhere in , We want the positioned element relative to the target element at all times. At the mercy of the parent: Parent have an overflow: hidden; set? another (the target), so why not extend the position property in CSS and allow us� How to position a div at the bottom of its container using CSS? Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container. Position attribute can take multiple values which are listed below:


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.

position, Relative to its original position the element above will now be In fact they behave almost the same, only fixed positioned elements are the child element is responding not to the dimensions of its parent, but the document: Div position relative to parent Center a Div within another Div. In some situation you may have to position one Div exactly at the center of another Div. That means position Div center horizontally and Div center vertically inside of another Div. Source Code


Positioning an element relative to another element • Dreamdealer, Position absolute uses it's first element in the DOM tree which is "Is the parent NAV element positioned then?". Also no. Then take the last� How would I center multiple items with position: relative both vertically and horizontally when I won't know the the size of the parent div? I know the position: absolute trick with negative margins, but this situation calls for something different. Here's the code:


Position a child div relative to parent container in CSS, The parent container is set to relative position and the child is set to absolute. If the parent div did not have the position CSS proerty set in this case, then it would align with the Let's add another child box in this example. The CSS position property defines, as the name says, how the element is positioned on the web page.. If you are interested in reading about the font properties, articles about the relative font


Advanced layouts with absolute and fixed positioning � WebPlatform , Position a div relative to another div which is not its parent using CSS - html. In the fiddle, I'm trying to position the child2 element relative to the� position: relative; An element with position: relative; is positioned relative to its normal position. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.