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.

© andreas for Webbdesigner Sundsvall, Andreas Johansson, 2010. | Permalink | Inga kommentarer | Taggad: css, pitfall, webbdesign