b3af21d50f
* chore(i18n,curriculum): update translations * chore: Italian to italian Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com>
2.8 KiB
id, title, challengeType, videoUrl, forumTopicId, dashedName
| id | title | challengeType | videoUrl | forumTopicId | dashedName |
|---|---|---|---|---|---|
| 587d781e367417b2b2512ac9 | Cambiare la posizione relativa di un elemento | 0 | https://scrimba.com/c/czVmMtZ | 301044 | change-an-elements-relative-position |
--description--
Il CSS tratta ogni elemento HTML come un riquadro a sé, il che di solito viene indicato come il Box Model CSS. Gli elementi a livello di blocco iniziano automaticamente su una nuova riga (pensa a intestazioni, paragrafi e div) mentre gli elementi in linea stanno all'interno del contenuto circostante (come immagini o span). Il layout predefinito degli elementi è chiamato il flusso normale di un documento, ma CSS offre la proprietà position per sovrascriverlo.
Quando la posizione di un elemento è impostata a relative, ti è permesso specificare come il CSS dovrebbe spostarlo relativamente alla sua posizione corrente nel flusso normale della pagina. Si abbina alle proprietà CSS di offset left o right, e top o bottom. Queste dicono di quanti pixel, punti percentuali, o em spostare l'elemento da dove è normalmente posizionato. Il seguente esempio sposta il paragrafo di 10 pixel dal basso:
p {
position: relative;
bottom: 10px;
}
Cambiare la posizione di un elemento a relative non lo rimuove dal flusso normale - altri elementi intorno ad esso si comportano ancora come se quell'elemento fosse nella sua posizione predefinita.
Nota: Il posizionamento ti dà molta flessibilità e potere sul layout visuale di una pagina. È bene ricordare che indipendentemente dalla posizione degli elementi, il markup HTML sottostante dovrebbe essere organizzato ed avere senso quando letto dall'alto verso il basso. Questo è il modo in cui gli utenti con disabilità visive (che si basano su dispositivi assistivi come gli screen reader) accedono ai tuoi contenuti.
--instructions--
Cambia la position di h2 a relative, e usa un offset CSS per spostarlo a 15 pixel dal top di dove si trova nel flusso normale. Nota che non vi è alcun impatto sulle posizioni degli elementi h1 e p circostanti.
--hints--
L'elemento h2 dovrebbe avere una proprietà position impostata a relative.
assert($('h2').css('position') == 'relative');
Il tuo codice dovrebbe utilizzare un offset CSS per posizionare relativamente h2 a 15px dal top rispetto a dove si troverebbe normalmente.
assert($('h2').css('top') == '15px');
--seed--
--seed-contents--
<style>
h2 {
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>
--solutions--
<style>
h2 {
position: relative;
top: 15px;
}
</style>
<body>
<h1>On Being Well-Positioned</h1>
<h2>Move me!</h2>
<p>I still think the h2 is where it normally sits.</p>
</body>