My current issue arises when utilizing negative positioning (e.g. top:-20px) within an absolute div while adding overflow:auto to the parent div. The text becomes hidden in all browsers. Unfortunately, due to the structure of my application, it is not feasible to remove overflow:auto. Any helpful suggestions on how to keep the text visible in this situation? Feel free to refer to the code below for a better understanding.
<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<style>
body{
margin:50px;
}
.Relative{
width:200px;
height:200px;
position:relative;
overflow:auto;
background-color:#CCCCCC;
z-index:1;
}
.Abs{
position:absolute;
top:-20px;
right:0;
width:100px;
height:100px;
border:solid 1px;
background-color:#99CCCC;
z-index:99999999 !important;
}
.RemoveOverFlow{
overflow:inherit;
}
</style>
</head>
<body>
<div class="Relative RemoveOverFlow">
<div class="Abs">This is a test text in absolute div</div>
Remove <br />
overflow <br />
from the <br />
relative div
</div>
<br />
<br />
<div class="Relative">
<div class="Abs">This is a test text in absolute div</div>
Add <br />
overflow:auto <br />
into <br />
relative div
</div>
</body>
</html>