2.4 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
587d781e367417b2b2512acb | Vincolare un elemento al suo genitore con il posizionamento assoluto | 0 | https://scrimba.com/c/cyLJ7c3 | 301060 | lock-an-element-to-its-parent-with-absolute-positioning |
--description--
La prossima opzione per la proprietà CSS position
è absolute
, che vincola l'elemento in una posizione rispetto al suo contenitore genitore. A differenza della posizione relative
, questo rimuove l'elemento dal flusso normale del documento, quindi gli elementi circostanti lo ignorano. Le proprietà di offset CSS (superiore o inferiore e sinistra o destra) sono usate per regolare la posizione.
Una sfumatura con posizionamento assoluto, sarà vincolata rispetto al suo antenato più vicino che sia posizionato. Se si dimentica di aggiungere una regola di posizione all'elemento genitore (questo viene tipicamente fatto usando position: relative;
), il browser continuerà a cercare nella catena fino a usare il valore di default del tag body
.
--instructions--
Blocca l'elemento #searchbar
in alto a destra nella sua section
genitore dichiarando position
come absolute
. Dagli un offset top
e right
di 50 pixel ciascuno.
--hints--
L'elemento #searchbar
dovrebbe avere una position
impostata su absolute
.
assert($('#searchbar').css('position') == 'absolute');
Il tuo codice dovrebbe utilizzare un offset CSS top
di 50 pixel sull'elemento #searchbar
.
assert($('#searchbar').css('top') == '50px');
Il tuo codice dovrebbe utilizzare uno spostamento right
di 50 pixel sull'elemento #searchbar
.
assert($('#searchbar').css('right') == '50px');
--seed--
--seed-contents--
<style>
#searchbar {
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>
--solutions--
<style>
#searchbar {
position: absolute;
top: 50px;
right: 50px;
}
section {
position: relative;
}
</style>
<body>
<h1>Welcome!</h1>
<section>
<form id="searchbar">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<input type="submit" name="submit" value="Go!">
</form>
</section>
</body>