Overflow hidden och position absolute

Tänkte ta upp en liten fallgrop jag råkade ut för ett tag sedan när det handlar om CSS och elementen overflow kombinerat med position absolute.

Scenariot är att jag skulle i en sandlåda med css-regeln overflow: hidden; och position: relative; sätta ut ett element utanför sandlådan med hjälp av position: absolute;.

Scenariot är ganska logiskt egentligen om man tänker efter, en wrapper med overflow: hidden; kommer aldrig visa något utanför dess gränser – även om man använder position absolute och försöker manipulera dess gränser. Speciellt då de flesta block-element i många ramverk och rekommendationer är satta med position: relative;

<div style="overflow: hidden; width: 100px; height: 100px; background-color: red;">
	<div style""position: absolute; top: 40px; height: 70px; width: 70px; left: 50px; background-color: #ccc; z-index: 3;">
	</div>
</div>

Koden ovan fungerar som det är tänkt i mitt case med att den inre diven flyter utanför den övre. Koden nedan är dock satt med position: relative; och producerar ett helt annat resultat.

<div style="overflow: hidden; width: 100px; height: 100px; background-color: red;position:relative;">
	<div style="position: absolute; top: 40px; height: 70px; width: 70px; left: 50px; background-color: #ccc; z-index: 3;">
	</div>
</div>

En liten tanke krävs alltså innan du som css-knackare sätter regeln div { position: relative; }, det kan komma tillbaka och bita dig i baken senare.

Edit: en vän påpekade att jag borde addera att z-index inte spelar någon roll i det nedre fallet, utgången blir fortfarande det samma.