CSS absolute position and not relative to its absolute parent div

position an element relative to another element from anywhere in the dom
position absolute
css position: relative to another element
position: absolute not relative to parent
css position: sticky
position: absolute not working
position: fixed relative to parent
position:relative not working

There is a parent div which has absolute positioning with a child having absolute positioning. My problem is to make the child div relative to the whole page not to its parent:

Example:

.parent { 
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  animation: move 2s infinite;
}
.child { 
  position: fixed;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: purple;
  z-index: 2;
}

@keyframes move {
50% {
transform: translateX(25px);
}
}
<div class="parent">
<div class="child"></div>
</div>

You could use animation in opposite direction for the child element and this will make child element look like its static in one position.

.parent {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  animation: move 2s infinite;
}

.child {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: purple;
  animation: moveBack 2s infinite;
  z-index: 2;
}

@keyframes move {
  50% {
    transform: translateX(25px);
  }
}

@keyframes moveBack {
  50% {
    transform: translateX(-25px);
  }
}
<div class="parent">
  <div class="child"></div>
</div>

How to use the position property in CSS to align elements, In position: relative , the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. If it doesn't have any parent elements, then the initial document <html> will be its parent. Relative- the element is positioned relative to its normal position. Absolute- the element is positioned absolutely to its first positioned parent. Fixed- the element is positioned related to the


Absolute positioning behaves like relative positioning for child divs.

You have to move the child div outside the parent div to make it fixed relative to the page/ body.

Otherwise child will always positioned relative to parent

Absolute Positioning Inside Relative Positioning, A page element with relative positioning gives you the control to absolutely position themselves in relation to the body element instead of their direct parent. that one in the bottom left is going to stick with the browser window, not hang back position against html (this can be seen by adding margin-top to body, and the  You just have to duplicate the content of child1 and child2 in relative divs with display:none in parent div. Say child1_1 and child2_2. Put child2_2 on top and child1_1 at the bottom. When your jquery (or whatever) calls the absolute div, just set the according relative div (child1_1 or child2_2) with display:block AND visibility:hidden.


You can consider an idea using clip-path animation

.parent { 
  position: absolute;
  top: 10px;
  left: 10px;
  width: 125px;
  height: 100px;
  background-color: blue;
  overflow: hidden;
  animation: move 2s infinite;
  clip-path:polygon(0 0, calc(100% - 25px) 0,calc(100% - 25px) 100%, 0 100%);
}
.child { 
  position: absolute;
  top: 5px;
  left: 5px;
  width: 50px;
  height: 50px;
  background-color: purple;
}

@keyframes move {
50% {
  clip-path:polygon(25px 0, 100% 0,100% 100%, 25px 100%);
}
}
<div class="parent">
<div class="child"></div>
</div>

CSS Position: Relative vs Position Absolute, - the element is positioned absolutely to its first positioned parent. Fixed - the element is positioned related to the browser window. To position an element "fixed" relative to a parent element, you want position:absolute on the child element, and any position mode other than the default or static on your parent element. For example: #parentDiv { position:relative; } #childDiv { position:absolute; left:50px; top:20px; }


You can use this code

body {
            margin: 0;
            padding: 0;
        }
        .parent { 
            position: absolute;
            top: 10px;
            left: 10px;
            width: 200px;
            height: 200px;
            background-color: blue;
            overflow: hidden;
            animation: move 2s infinite;
        }
        .child { 
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: purple;
            z-index: 2;
        }
        @keyframes move {
            50% {
                transform: translateX(25px);
            }
        }
    <div class="parent">
        <div class="child"></div>
    </div>

Difference between css position absolute versus relative, , the element is removed from the document and placed exactly where you tell it to go. 3. Absolute. In position: relative, the element is positioned relative to itself. However, an absolutely positioned element is relative to its parent. An element with position: absolute is removed from the normal document flow. It is positioned automatically to the starting point (top-left corner) of its parent element.


The position of your child has to be absolute. Absolute positioning has to do with the page itself.

Position Relative vs Absolute?, positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. I have a relatively positioned div with no specific height, with an absolute div inside. I want the relative div to stretch to accommodate the absolute. This doesn’t work, as the absolute div renders outside the relative one’s boundaries. e.g. Here’s a relative div, with an absolute inside it to display a red box. reldiv {position: relative;


CSS Layout - The position Property, Relative - the element is positioned relative to its normal position. Absolute - the element is positioned absolutely to its first positioned parent. Fixed - the element is positioned related to the browser window. 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.


Position a child div relative to parent container in CSS, 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  If the parent has the position property omitted, then the child div would be positioned relative to the next containing div with a relative or absolute position. If no containing elements have these position properties set on the page, then the child will be positioned relative to the page body.


How to understand CSS Position Absolute once and for all, To be able to position itself, it has to know which parent div it's going to How to understand CSS Position Absolute once and for all to the screen with position: relative . .box-4 then starts asking its parent divs if they are positioned. At first, it asks .box-3 and gets No, I am not positioned. as an answer. It works the same if the parent is set to absolute instead of relative (an absolute inside another absolute) the first absolute acts as the positioning context for the second absolute. Anyway, here our main problem is that the relative parent is also the overflow:hidden one.