Considering that ponents such as dialogs, modals, tooltips, etc. should be of higher stacking index than any other elements in an HTML page, I placed these ponents in an immediate sibling of root element where all the other elements are placed. React developers will quickly recognize this and they'll know that I'm trying to use React Portals. You can visualize it here:
<body>
<div id="root">
// ----- other elements -----
<div id="supposed-parent" />
// ----- other elements -----
</div>
<div id="dialog-container">
<div id="supposed-child" />
</div>
</body>
So, how can I position #supposed-child next or beside #supposed-parent? Any help would be appreciated.
Considering that ponents such as dialogs, modals, tooltips, etc. should be of higher stacking index than any other elements in an HTML page, I placed these ponents in an immediate sibling of root element where all the other elements are placed. React developers will quickly recognize this and they'll know that I'm trying to use React Portals. You can visualize it here:
<body>
<div id="root">
// ----- other elements -----
<div id="supposed-parent" />
// ----- other elements -----
</div>
<div id="dialog-container">
<div id="supposed-child" />
</div>
</body>
So, how can I position #supposed-child next or beside #supposed-parent? Any help would be appreciated.
-
You can just use css. w3schools./css/css_positioning.asp Make the container
position: relativein your example the<body>or probably another div in an actual example and then the two<div>s areposition: absolutewith positioning like you want. Or you can use a css grid and move their parents where you want css-tricks./snippets/css/plete-guide-grid – DCTID Commented Apr 17, 2019 at 3:25 - I'm react fluent but don't get what you mean. This can be a pure css problem too. don't know what you're trying to achieve, some example please. – hackape Commented Apr 17, 2019 at 3:38
-
Normally, to position an element relative to another ponent, you just have to put the element as child of the other ponent, then put
position: relativeandposition: absolutein the style of these elements. But, in this case, you can see that they cannot be parent and child. – sdabrutas Commented Apr 17, 2019 at 4:37 - Take tooltips for example. Tooltips must overlay to any elements in the web page regardless of z-indices of those elements, right? To do this, you must put it in a position in the code where it can get higher stacking index. But, putting it in that part of the code, you can't use "relative-absolute" positioning, yet still you should display it beside or relative to its supposed parent. This is what I am trying to do. – sdabrutas Commented Apr 17, 2019 at 4:42
1 Answer
Reset to default 5I don't think this is possible with a pure css. But with a little script we can achieve this. Take the offset-left and top of the supposed-parent and apply the same to the supposed-child. The child should be absolute positioned element. Check the below sample and It hope this will be useful for you.
Even though the supposed-child(yellow box) is independent of the supposed-parent, It will be always align with the top-left of the supposed-parent.
function offsetCalculate(){
var parentTop = $('#supposed-parent').offset();
var parentLeft = $('#supposed-parent').offset();
$('#supposed-child').css({
'top':parentTop.top,
'left': parentLeft.left
});
}
$(document).ready(function () {
offsetCalculate();
});
$(window).resize(function(){
offsetCalculate();
});#supposed-child{
position: absolute;
background: yellow;
border-radius: 5px;
padding: 10px;
z-index: 999;
}<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="root">
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui.</h1>
<div id="supposed-parent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dolor libero, euismod et nisl eu, imperdiet elementum neque. Praesent aliquet non tellus sed blandit. Ut vitae velit eget turpis ornare convallis. Quisque nec felis eget mi vestibulum luctus eu non dui. Pellentesque eget modo tellus. Curabitur a dolor est. Integer dapibus lectus nec mi luctus, ac ornare ex auctor. Donec vel nisi nulla. Mauris maximus egestas nunc ut egestas. Suspendisse id leo nec elit consectetur interdum. Ut purus nibh, tristique quis est vel, ultrices blandit nibh. Aenean nibh justo, mattis sed vulputate quis, efficitur eu mauris. Sed vel vulputate metus, et dictum arcu. In ornare nisl vitae purus elementum, quis egestas dolor volutpat. In velit nisi, posuere in urna non, feugiat luctus enim.
</div>
</div>
<div id="dialog-container">
<div id="supposed-child" >This is a popup</div>
</div>