I'm encountering an issue.
I'm currently developing a widget to showcase certain elements on a webpage. I have created a fiddle, please take a look:
.wrapper {
width: 300px;
display: block;
position: relative;
overflow: hidden;
background-color: gray;
}
.widget {
width: 300px;
height: 300px;
display: block;
position: relative;
background-color: green;
}
.box {
width: 100px;
height: 100px;
position: absolute;
left: 250px;
top: 50px;
background-color: red;
visibility: visible;
}<div class="wrapper">
<p>Some text and descriptions</p>
<div class="widget">
<div class="box"></div>
</div>
<p>Some more text and description and some more offcourse and a bit more, and just a tiny bit more</p>
</div>We are using absolute positioning on certain elements within the widget, but the outer parents on the users' pages have overflow:hidden; applied to them, causing some elements to be partially hidden.
Is there a way to resolve this issue? Without altering the properties of the wrapper element, we want the red box in the fiddle to be fully displayed as intended.
However, changing the box to a fixed position is not a viable solution as it leads to complications.