Sto cercando di creare un orizzontale al 100%grafico a barre impilate usando HTML e CSS. Mi piacerebbe creare le barre utilizzando i DIV con i colori di sfondo e le larghezze percentuali in base ai valori che voglio rappresentare. Voglio anche avere delle linee di griglia per contrassegnare una posizione arbitraria lungo il grafico.
Nella mia sperimentazione, ho già ottenuto le barre per impilare orizzontalmente assegnando la proprietà CSS float: left. Tuttavia, mi piacerebbe evitarlo, dato che sembra davvero confondere 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 digestisco questo, ma non so ancora come farlo: voglio essere in grado di specificare la posizione di diversi elementi relativi 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 "s:
- Cross-browser (idealmente senza troppi hacks del browser)
- Funziona in modalità Quirks
- Più chiaro / pulito possibile, per facilitare le personalizzazioni
- Fatto senza JavaScript, se possibile.
risposte:
346 per risposta № 1Hai ragione che il posizionamento CSS è la strada da percorrere. Ecco una breve corsa verso il basso:
position: relative imposterà un elemento relativo a si. In altre parole, gli elementi sono disposti influsso normale, quindi viene rimosso dal flusso normale e spostato da qualsiasi valore specificato (superiore, destra, inferiore, sinistra). È importante notare che poiché viene rimosso dal flusso, altri elementi intorno ad esso non si spostano con esso (utilizzare invece margini negativi se si desidera questo comportamento).
Tuttavia, probabilmente sei interessato a position: absolute che posizionerà un elemento rispetto a un contenitore. Per impostazione predefinita, il contenitore è la finestra del browser, ma se ha un elemento padre position: relative o position: absolute impostato su di esso, quindi fungerà da genitore per il posizionamento delle coordinate per i suoi figli.
Dimostrare:
<div id="container">
<div id="box"> </div>
</div>
#container {
position: relative;
}
#box {
position: absolute;
top: 100px;
left: 50px;
}
In questo esempio, l'angolo in alto a sinistra di #box sarebbe 100 px in basso e 50 px a sinistra nell'angolo in alto a sinistra di #container. Se #container non aveva position: relative impostare, le coordinate di #box sarebbe relativo all'angolo in alto a sinistra della porta di visualizzazione del browser.
Spero possa aiutare.
16 per risposta № 2
È necessario impostare in modo esplicito 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;
}
9 per risposta № 3
So che sono in ritardo, ma spero che questo aiuti.
Di seguito sono riportati i valori per la proprietà position.
- statico
- fisso
- parente
- assoluto
posizione: statica
Questo è il valore predefinito. Significa che l'elemento si verificherà in una posizione che normalmente sarebbe.
#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 precedente CSS sposterà l'elemento #myelem 30px a sinistra e 30px dall'alto 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 precedente CSS posizionerà l'elemento #myelem in una posizione da 30px dall'alto e 300px da sinistra nella pagina e scorrerà con la pagina.
E infine...
posizione relativa + assoluta
Possiamo impostare la proprietà position di un elemento genitore su parente e quindi impostare la proprietà position dell'elemento figlio 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 il # DIV-2 elemento è posizionato nell'angolo in alto a destra all'interno del #contenitore elemento.
GitHub: puoi trovare il codice HTML dell'immagine sopra Qui e CSS Qui.
Spero questo lezione aiuta.
3 per risposta № 4
Il posizionamento assoluto posiziona un elemento rispetto al suo predecessore posizionato più vicino. Così messo position: relative sul contenitore, quindi per elementi figlio, top e left sarà relativo alla parte in alto a sinistra del contenitore fino a quando gli elementi figlio hanno position: absolute. Ulteriori informazioni sono disponibili in la specifica CSS 2.1.
0 per risposta № 5
Se è necessario posizionare prima un elemento relativo al suo elemento contenitore, è necessario aggiungere position: relative all'elemento contenitore. L'elemento figlio che si desidera posizionare relativamente al genitore deve avere position: absolute. Il modo in cui funziona il posizionamento assoluto è quello è fatto relativamente al primo elemento genitore relativamente (o assolutamente) posizionato. Nel caso ci sia no relativamente posizionato genitore, l'elemento sarà posizionato rispetto al elemento radice (direttamente all'elemento HTML).
Quindi se vuoi posizionare il tuo elemento figlio nella parte in alto a sinistra del contenitore genitore, dovresti fare questo:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
Trarrai grandi benefici dalla lettura Questo articolo. Spero che questo ti aiuti!