将子元素绝对定位到页面，即使绝对定位的父元素被移动

Question

I position a container absolute to the page. In this container there is a span that I need to position absolute to the page as well, because I want to hide it if it overflows the parent container after it's moved.

It should look like this .

I can only hide the span, if it is a child and the parent has its overflow hidden. But then I can't position both absolute.

My current code looks like this:

 .container { overflow: hidden; position: absolute; width: 150px; height: 50px; background-color: black; animation: move 2s ease-in-out alternate infinite; }.container span { position: absolute; left: 20px; top: 20px; color: white; font-size: 16px; } @keyframes move { 0% { top: 0; } 100% { top: 200px; } }

 <div class="container"> <span>Text</span> </div>

Answer 1

 .container { overflow: hidden; position: absolute; width: 150px; height: 50px; background-color: black; animation: move 2s ease-in-out alternate infinite; }.container span { position: absolute; left: 20px; top: 20px; color: white; font-size: 16px; animation: move2 2s ease-in-out alternate infinite; } @keyframes move { 0% { top: 0; } 100% { top: 200px; } } @keyframes move2 { 0% { top: 0; } 100% { top: -200px; } }

 <div class="container"> <span>Text</span> </div>

Answer 2

Use position:fixed with the child and consider clip-path instead of overflow to hide the overflow:

 .container { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); position: absolute; width: 150px; height: 50px; background-color: black; animation: move 2s ease-in-out alternate infinite; }.container span { position: fixed; left: 20px; top: 20px; color: white; font-size: 16px; } @keyframes move { 0% { top: 0; } 100% { top: 200px; } } body { background:blue; }

 <div class="container"> <span>Text</span> </div>