CSS relativo + destra (o inferiore) quasi MAI lavoro

Scrivo CSS da un po 'di tempo.CSS relativo + destra (o inferiore) quasi MAI lavoro

Ho notato che

<div style="position: relative; right: 20%; bottom: 20%;">some text</div>

non funziona mai!

posizionamento relativo funzionerebbe con sinistra e superiore specificato ma non con destra/fondo. Perché?

Una soluzione rapida è usare "assoluto" e specificare in pixel a destra/in basso, ma ho bisogno di un motivo.

Inoltre, correggimi se sbaglio. Indipendentemente dal fatto che il contenitore esterno sia posizionato in modo assoluto o relativamente, non ha molto senso posizionare qualcosa "relativo" ai confini di quel contenitore o gli elementi all'interno di un container devono sempre essere posizionati "in assoluto"?

Grazie.

fonte

2013-04-30 Akshay Sharma

Quando si dice che questa caratteristica "non funziona", che cosa vuoi dire? Ci sono molti significati diversi per questo. Per aiutare il tuo problema a capire gli altri utenti, prova ad aggiungere del codice o un [jsFiddle] (http://jsfiddle.net) per aiutare. –

Da Absolute vs. Relative - Explaining CSS Positioning

posizionamento relativo utilizza gli stessi quattro proprietà di posizionamento come posizionamento assoluto. Ma invece di basare la posizione dell'elemento sulla porta di visualizzazione del browser, inizia da dove sarebbe l'elemento se fosse ancora nel flusso normale.

fonte

2013-04-30 02:03:51 oomlaut

Quindi a destra: 40px; è praticamente uguale a margin-left: -40px; in tal caso, allora? Questo è semplicemente bizzarro ... –

La differenza lì, @TomAuger è la proprietà 'position' che dovrebbe essere assegnata all'elemento _parent_ per influenzare tale cambiamento. Pensaci in termini di ** push ** vs ** pull **: 'right: 40px;' significherebbe che l'elemento genitore avrebbe bisogno di 'position: relative;' e l'elemento sarebbe ** spinto ** 40 px a la sinistra del normale margine di delimitazione destro. Tuttavia, se il modello di box viene compresso, questo potrebbe non fornire il rendering di visualizzazione desiderato. Invece 'margin-left: -40px;' ** estrae ** l'elemento dal limite del lato sinistro e l'elemento genitore può mantenere la sua proprietà 'posizione: static;' di default. – oomlaut

Il posizionamento relativo funziona con i giusti valori di fondo /, solo che non il modo in cui ti aspettavi:

http://cssdesk.com/RX24j

pensare ai valori di posizione su elementi relativi come i margini, che gli elementi circostanti semplicemente ignorare. I "margini" spostano sempre l'elemento relativo alla posizione precedente nel normale flusso del documento, ma lo rimuovono dal flusso normale allo stesso tempo.

Quando fuori dal normale flusso del documento, gli elementi circostanti agiscono come se fosse nella sua posizione originale nel flusso normale ... ma non lo è. Questo è il motivo per cui un elemento relativo può sovrapporsi al suo genitore (come in Rel 1).

fonte

2013-04-30 02:34:38 user2313440

Hai provato questo?

<div style="position: relative; right: -20%; bottom: -20%;">some text</div>

o meglio

<div style="position: relative; right: -80%; bottom: -80%;">some text</div>

fonte

2015-06-02 23:12:59 SoEzPz

CSS relativo + destra (o inferiore) quasi MAI lavoro

risposta

Problemi correlati