Posizione assoluta ma relativa al genitore

457

Ho due div all'interno di un altro div e voglio posizionare un div figlio in alto a destra del div genitore e l'altro div figlio nella parte inferiore del div genitore usando css. Vale a dire, voglio usare il posizionamento assoluto con i due div figli, ma posizionarli rispetto al div genitore piuttosto che alla pagina. Come posso fare questo?

HTML di esempio:

<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>

html css

— BlaShadow
fonte

Vuoi che son1 sia nell'angolo in alto a destra di padre, ma dove in basso dovrebbe essere son2? In basso a sinistra, a destra o al centro?

— j08691,

1

In questo caso, dovresti impostare position: relative all'elemento genitore e position: absolute agli elementi figlio. Sul primo elemento figlio, dovresti mettere top: 0 e right: 0 per posizionarlo in alto a destra dell'elemento genitore. Sul secondo figlio, dovresti mettere bottom: 0 per posizionarlo in fondo all'elemento genitore. C'è un ottimo articolo qui kolosek.com/css-position-relative-vs-position-absolute che spiega in dettaglio il posizionamento relativo e assoluto.

— Nesha Zoric,

813

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 0;
}

#son2 {
   position: absolute;
   bottom: 0;
}

Questo funziona perché position: absolutesignifica qualcosa come "uso top, right, bottom, leftper posizionarsi in relazione al l'antenato più vicino che ha position: absoluteo position: relative."

Quindi facciamo e #fatherabbiamo position: relativei bambini position: absolute, quindi usiamo tope bottomposizioniamo i bambini.

— Domenic
fonte

17

Perché è #father { position: relative; }richiesto?

— joshreesjones,

4

è tenuto a cambiare la "regola di posizione" per coloro che sono dentro di lui.

— BlaShadow

36

@ mathguy54 Perché la specifica dice che gli elementi posizionati in modo assoluto sono posizionati rispetto al primo genitore posizionato , il che significa che qualsiasi genitore che non ha un valore di posizione di static.

— Alex W

che dire di tale scenario: PADRE è relativo e la sua altezza è del 100% come posizionare figlio e figlio2, diciamo rispettivamente il 20% e il 70% dell'altezza del padre?

— Rossitten,

1

@BruceSun w3.org/TR/CSS2/visudet.html#contain-block-details

— Alex W

27

div#father {
    position: relative;
}
div#son1 {
    position: absolute;
    /* put your coords here */
}
div#son2 {
    position: absolute;
    /* put your coords here */
}

— Brian Warshaw
fonte

1

Cosa succede se è necessario ridimensionare un genitore con un figlio?

— FrenkyB,

10

Nel caso in cui qualcuno desideri posizionare un div bambino direttamente sotto un genitore

#father {
   position: relative;
}

#son1 {
   position: absolute;
   top: 100%;
}

Demo funzionante Codepen

— petergus
fonte

6

Se non dai alcuna posizione al genitore, allora per impostazione predefinita ci vuole static. Se vuoi capire quella differenza fai riferimento a questo esempio

Esempio 1::

http://jsfiddle.net/Cr9KB/1/

   #mainall
{

    background-color:red;
    height:150px;
    overflow:scroll
}

Qui la classe genitore non ha posizione, quindi l'elemento viene posizionato in base al corpo.

Esempio 2 ::

http://jsfiddle.net/Cr9KB/2/

#mainall
{
    position:relative;
    background-color:red;
    height:150px;
    overflow:scroll
}

In questo esempio il genitore ha una posizione relativa, quindi gli elementi sono posizionati assoluti all'interno del relativo genitore.

— Anam
fonte

E che dire se non hai #mainall {height: 150px} ...? Voglio dire, se la mainall ha un'altezza dinamica?

— Albert Català,

quindi il tuo elemento mobile sarà relativo alla posizione che aveva l'elemento genitore al momento del caricamento della pagina (e del css). Se vuoi aggiornarlo dopo il caricamento della pagina, usa javascript - clientX e clientY sono un buon punto di partenza

— Abraham Brookes