CSS:
.layers {
position: relative;
height: 500px;
width: 500px;
/* Some -webkit and -moz transformations */
}
.layers > div {
position: absolute;
height: 500px;
width: 500px;
}
.item {
position: absolute;
width: 5px;
height: 5px;
}
HTML:
<article class="someclass">
<section class="layers">
<div style="/* -webkit and -moz transformations */">
<img src='image.png'>
<div class="item" style="/* -webkit and -moz transformations */">test</div>
</div>
</section>
</article>
Upon loading this page, the image image.png is displayed with the text test on top of it around 90% of the time.
(the specific position may vary due to the transformations applied)
The remaining 10% of the time that I attempt to load the page, the item div appears as if its position is static, causing it not to be positioned on top of the image.
My assumption is that this issue might be related to the timing of element loading, so there may not be a definitive solution. However, I could be overlooking something in my implementation.
For reference, I tested this on Chrome and Safari, achieving consistent results in both browsers.