Traduci i valori percentuali X e Y in base all'altezza e alla larghezza degli elementi?

Question

Traduzione di un elemento L'asse Y 50% lo sposterà verso il basso del 50% della sua altezza, non del 50% dell'altezza dei genitori come mi aspetterei. Come faccio a dire a un elemento di traduzione di basare la sua percentuale di traduzione sull'elemento genitore? O non capisco qualcosa?

http://jsfiddle.net/4wqEm/2/

Answer 1

Per utilizzare percentuale nella proprietà tradurre, è necessario utilizzare Javascript: codice http://jsfiddle.net/4wqEm/27/

HTML:

<div id="parent"> 
    <div id="children"></div> 
</div>​​​​​​​​​​​​​ 

codice CSS:

#parent { 
    width: 200px; 
    height: 200px; 
    background: #ff0; 
} 
#children { 
    width: 10%; 
    height: 10%; 
    background: #f00; 
} 

codice Javascript :

parent = document.getElementById('parent'); 
children = document.getElementById('children'); 

parent_height = parent.clientHeight; 
​children_translate = parent_height * 50/100; 
children.style.webkitTransform = "translateY("+children_translate+"px)";​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Spero di poterti aiutare e dirmi se hai altri problemi.

Answer 2

Quando si utilizza la percentuale in translate, si riferisce alla larghezza o all'altezza di se stesso. Date un'occhiata a https://davidwalsh.name/css-vertical-center (demo):

Una cosa interessante di CSS trasforma è che, quando si applica loro con valori percentuali, essi basano tale valore sulle dimensioni dell'elemento cui sono in corso di attuazione su, a differenza a proprietà come top, right, bottom, left, margin e padding, che usano solo le dimensioni del genitore (o in caso di posizionamento assoluto, che usa il parente relativo più prossimo).

Answer 3

È inoltre possibile utilizzare un blocco in più e utilizzare la transizione per se non il nodo figlio

codice HTML:

<div id="parent"> 
    <div id="childrenWrapper">  
     <div id="children"></div> 
    </div> 
</div>​​​​​​​​​​​​​ 

css dovrebbe essere qualcosa di simile

#parent { 
    position: relative; 
    width: 200px; 
    height: 200px; 
    background: #ff0; 
} 
#childrenWrapper{ 
    width: 100%; 
    height: 100%; 
} 
#children { 
    width: 10%; 
    height: 10%; 
    background: #f00; 
} 

Answer 4

È possibile rendere l'elemento posizionato in modo assoluto e utilizzare la proprietà left e top per ottenere il valore percentuale come padre.

Answer 5

La tua affermazione ha assolutamente ragione sulle percentuali che provengono dall'elemento molto tradotto. Invece di usare la proprietà translate nel tuo caso, dovresti usare il posizionamento assoluto per rimanere relativo al div padre. Ho assolutamente posizionato verticalmente il tuo div rosso qui: (non dimenticare di aggiungere la posizione relativa al div genitore.Deve essere posizionato diverso da quello predefinito statico):

js fiddle pen here

body { 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    } 
body > div { 
    width: 200px; 
    height: 200px; 
    background: #ff0; 
    position: relative; 
    } 
body > div > div { 
    width: 10%; 
    height: 10%; 
    -webkit-transform: translateY(-50%); 
    background: #f00; 
    position: absolute; 
    top: 50%; 
    } 

Answer 6

È possibile utilizzare vw e VH di tradurre in base alle dimensioni viewport

@keyframes bubbleup { 
    0% { 
    transform: translateY(100vh); 
    } 

    100% { 
    transform: translateY(0vh); 
    } 
} 

Answer 7

Ciò che funziona per me utilizzando only CSS è :

.child { 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

    /* Backward compatibility */ 
    -webkit-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -o-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
} 

Come funziona:

• Posiziona in alto e a sinistra sposta il widget figlio in base alle coordinate padre. L'angolo in alto a sinistra del widget figlio apparirà esattamente al centro del genitore (questo non è ciò che vogliamo in questo momento).
• traslazione sposta il widget figlio -50% in alto a sinistra in base alla sua dimensione (non al padre). Significa che il widget verrà spostato esattamente al centro di se stesso.