La proprietà CSS top ha un interessante effetto quando gli viene applicato il valore auto. In questo caso l'offset verticale non viene più calcolato rispetto alla pagina, ma rispetto all'elemento precedente non posizionato (se presente). Possiamo sfruttare questo effetto per creare dei pullquote alternati.
Questa è la nostra struttura HTML:
<body>
<p class="pullquote left">...</p>
<p>...</p>
<p class="pullquote right">...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</body>
Ecco come sfruttiamo il valore auto nel nostro CSS:
body {
margin: 2em auto;
width: 40em;
font: 100% Arial, sans-serif;
line-height: 1.4;
position: relative;
}
p.pullquote {
font-family: Georgia, serif;
width: 20em;
margin: 0;
position: absolute;
top: auto;
padding: 0.5em 0.5em 0.5em 30px;
background: url(left_quote_24x24.png) no-repeat 0 0.5em;
border-radius: 5px;
}
.left {
left: -24em;
}
.right {
right: -24em;
}
Con questo valore il paragrafo selezionato si posizionerà rispetto all'elemento che lo precede se questo non è posizionato. In questo modo avremo sempre i paragrafi statici nel flusso e i pullquote ai loro lati. Potete visionare l'esempio finale in questa pagina.