Posiziona un elemento rispetto al suo contenitore

Sto cercando di creare un grafico a barre in pila orizzontale al 100% utilizzando HTML e CSS. Vorrei creare le barre usando DIVscon i colori di sfondo e le larghezze percentuali a seconda dei valori che voglio rappresentare graficamente. Voglio anche avere una griglia per contrassegnare una posizione arbitraria lungo il grafico.

Nella mia sperimentazione, ho già fatto impilare le barre orizzontalmente assegnando la proprietà CSS float: left. Tuttavia, vorrei evitarlo, poiché sembra davvero incasinare il layout in modi confusi. Inoltre, le linee della griglia non sembrano funzionare molto bene quando le barre sono flottanti.

Penso che il posizionamento CSS dovrebbe essere in grado di gestirlo, ma non so ancora come farlo. Voglio essere in grado di specificare la posizione di diversi elementi rispetto all'angolo in alto a sinistra del loro contenitore. Mi imbatto in questo tipo di problema regolarmente (anche al di fuori di questo particolare progetto grafico), quindi mi piacerebbe un metodo che sia:

1. Cross-browser (idealmente senza troppi hack del browser)
2. Funziona in modalità Quirks
3. Il più chiaro / pulito possibile, per facilitare le personalizzazioni
4. Fatto senza JavaScript, se possibile.

Hai ragione che il posizionamento CSS è la strada da percorrere. Ecco un breve riassunto:

position: relativeimposterà un elemento relativo a se stesso. In altre parole, gli elementi vengono disposti in un flusso normale, quindi vengono rimossi dal flusso normale e sfalsati da qualsiasi valore specificato (in alto, a destra, in basso, a sinistra). È importante notare che, poiché viene rimosso dal flusso, altri elementi circostanti non si sposteranno con esso (utilizzare invece i margini negativi se si desidera questo comportamento).

Tuttavia, molto probabilmente sei interessato a position: absolutequale posizionerà un elemento rispetto a un contenitore. Per impostazione predefinita, il contenitore è la finestra del browser, ma se un elemento padre ha position: relativeo position: absoluteimpostato su di esso, fungerà da padre per il posizionamento delle coordinate per i suoi figli.

Dimostrare:

#container {
  position: relative;
  border: 1px solid red;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

<div id="container">
  <div id="box">absolute</div>
</div>

In questo esempio, l'angolo in alto a sinistra di #boxsarebbe 100px in basso e 50px a sinistra dell'angolo in alto a sinistra di #container. Se #containernon fosse stato position: relativeimpostato, le coordinate di #boxsarebbero relative all'angolo in alto a sinistra della porta di visualizzazione del browser.

È necessario impostare esplicitamente la posizione del contenitore padre insieme alla posizione del contenitore figlio. Il modo tipico per farlo è qualcosa del genere:

div.parent{
    position: relative;
    left: 0px;  /* stick it wherever it was positioned by default */
    top: 0px;
}

div.child{
    position: absolute;
    left: 10px;
    top: 10px;
}

So di essere in ritardo, ma spero che questo aiuti.

Di seguito sono riportati i valori per la proprietà position.

• statico
• fisso
• parente
• assoluto

posizione: statica

Questo è predefinito. Significa che l'elemento si presenterà in una posizione normalmente.

#myelem {
    position : static;
}

posizione: fissa

Questo imposterà la posizione di un elemento rispetto alla finestra del browser (viewport). Un elemento posizionato fisso rimarrà nella sua posizione anche quando la pagina scorre.

(Ideale se si desidera il pulsante di scorrimento verso l'alto nell'angolo in basso a destra della pagina).

#myelem {
    position : fixed;
    bottom : 30px;
    right : 30px;
}

posizione: relativa

Per posizionare un elemento in una nuova posizione rispetto alla sua posizione originale.

#myelem {
    position : relative;
    left : 30px;
    top : 30px;
}

Il CSS sopra sposterà l'elemento #myelem di 30px a sinistra e 30px dalla parte superiore della sua posizione attuale.

posizione: assoluta

Se vogliamo che un elemento sia posizionato in una posizione esatta nella pagina.

#myelem {
    position : absolute;
    top : 30px;
    left : 300px;
}

Il CSS sopra posizionerà l'elemento #myelem in una posizione 30px dall'alto e 300px da sinistra nella pagina e scorrerà con la pagina.

E infine...

posizione relativa + assoluta

È possibile impostare la proprietà position di un elemento padre su relative e quindi impostare la proprietà position dell'elemento child su assoluto . In questo modo possiamo posizionare il bambino rispetto al genitore in una posizione assoluta.

#container {
    position : relative;
}

#div-2 {
    position : absolute;
    top : 0;
    right : 0;
}

Possiamo vedere nell'immagine sopra l' elemento # div-2 posizionato nell'angolo in alto a destra all'interno dell'elemento #container .

GitHub: Puoi trovare l'HTML dell'immagine sopra qui e CSS qui .

Spero che questo tutorial aiuti.

Il posizionamento assoluto posiziona un elemento rispetto al suo antenato posizionato più vicino. Quindi metti position: relativesul contenitore, quindi per gli elementi figlio, tope leftsarà relativo alla parte superiore sinistra del contenitore fino a quando gli elementi figlio hanno position: absolute. Maggiori informazioni sono disponibili nella specifica CSS 2.1 .

Se è necessario posizionare prima un elemento relativo al suo elemento contenitore, è necessario aggiungere position: relative l'elemento contenitore . L'elemento figlio che si desidera posizionare relativamente al genitore deve avere position: absolute . Il modo in cui funziona il posizionamento assoluto è che viene fatto rispetto al primo elemento padre relativamente (o assolutamente) posizionato . Nel caso in cui non vi sia un genitore relativamente posizionato, l'elemento verrà posizionato rispetto all'elemento radice (direttamente all'elemento HTML).

Quindi, se si desidera posizionare l'elemento figlio nella parte superiore sinistra del contenitore padre, è necessario eseguire questa operazione:

.parent {
  position: relative;
} 

.child {
  position: absolute;
  top: 0;
  left: 0;  
}

Ne trarrai grandi benefici dalla lettura di questo articolo . Spero che questo ti aiuti!