CSS absolute position and not relative to its absolute parent div

Question

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>

The goal is to make the little purple div fixed in top left of screen and hidden when the big blue div blue move outside it. I tried sticky - fixed with same result.

Then the elements should be siblings. You'll need to position the "child" elsewhere in the DOM to make that work — Garr Godfrey, Oct 08 '19 at 17:35
By this, i cant make use of `overflow: hidden` and the div wont be hidden — Kareem Dabbeet, Oct 08 '19 at 17:39
possible duplicate: https://stackoverflow.com/questions/15152712/css-positionfixed-inside-of-positionabsolute — Garr Godfrey, Oct 08 '19 at 17:39

score 1 · Accepted Answer · answered Oct 08 '19 at 17:40

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>

Yup this should marked as solved, but unfortunately this did not worked in my project because of multiple transition effects applied to my div, I'll try to fix this — Kareem Dabbeet, Oct 08 '19 at 18:02

davidev · Answer 2 · 2019-10-08T17:39:22.650

0

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

edited Oct 08 '19 at 17:39

answered Oct 08 '19 at 17:37

davidev

7,694
5
21
56

By this, i cant make use of `overflow: hidden` and the div wont be hidden – Kareem Dabbeet Oct 08 '19 at 17:38
What is your intention with `overflow: hidden`? – davidev Oct 08 '19 at 17:41
To hide the purple child when the blue div move outside it – Kareem Dabbeet Oct 08 '19 at 17:43

Temani Afif · Answer 3 · 2019-10-08T20:03:06.923

0

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>

edited Oct 08 '19 at 20:03

answered Oct 08 '19 at 19:43

Temani Afif

245,468
26
309
415

Also working answer, but I made the example simple by making my div as rectangle, but its way more complex and can't be drawn in clip-path. – Kareem Dabbeet Oct 09 '19 at 08:44
@KareemDabbeet share then your *real and complex* example. Actually we can only help based on the code you gave. No one can give you an accurate solution that will work for you since no one know the real use case – Temani Afif Oct 09 '19 at 08:45

score 0 · Answer 4 · answered Oct 09 '19 at 09:15

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>

score -1 · Answer 5 · answered Oct 08 '19 at 17:55

-1

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

answered Oct 08 '19 at 17:55

Omar Guaba

1
1

The child is already absolutely positioned. The issue is that the parent is also absolutely positioned, which causes the child's absolute position to be anchored to the parent instead of the page. – Christopher Oct 08 '19 at 18:17
Yes, that is true. But you have to understand that I was talking about the first script on the page. – Omar Guaba Oct 09 '19 at 19:23

CSS absolute position and not relative to its absolute parent div

5 Answers5