Wenn Sie die Y-Achse eines Elements um 50% verschieben, wird sie um 50% ihrer eigenen Größe nach unten verschoben, nicht um 50% der Größe der Eltern, wie ich es erwarten würde. Wie kann ich einem übersetzenden Element mitteilen, dass sein Übersetzungsprozentsatz auf dem übergeordneten Element basiert? Oder verstehe ich etwas nicht?
css
translate
percentage
translate3d
Andrew Tibbetts
quelle
quelle
Antworten:
Wenn Sie den Prozentsatz in der Übersetzung verwenden, bezieht er sich auf die Breite oder Höhe von sich selbst. Schauen Sie sich https://davidwalsh.name/css-vertical-center ( Demo ) an:
quelle
transform: translate(50%)
scheint die Breite und Höhe des übergeordneten Elements zu verwendenSie können vw und vh verwenden, um basierend auf der Größe des Ansichtsfensters zu übersetzen
@keyframes bubbleup { 0% { transform: translateY(100vh); } 100% { transform: translateY(0vh); } }
quelle
Was für mich funktioniert, wenn ich nur CSS verwende, ist:
.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%); }
Wie es funktioniert:
quelle
Um den Prozentsatz in der Eigenschaft translate zu verwenden, müssen Sie Javascript verwenden: http://jsfiddle.net/4wqEm/27/
HTML Quelltext :
<div id="parent"> <div id="children"></div> </div>
CSS-Code:
#parent { width: 200px; height: 200px; background: #ff0; } #children { width: 10%; height: 10%; background: #f00; }
Javascript-Code:
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)";
Ich hoffe, ich konnte Ihnen helfen und mich sagen, wenn Sie ein anderes Problem haben.
quelle
Ihre Aussage ist absolut richtig in Bezug auf die Prozentsätze, die aus dem sehr übersetzten Element stammen. Anstatt in Ihrem Fall die Eigenschaft translate zu verwenden, sollten Sie die absolute Positionierung verwenden, um relativ zum übergeordneten div zu bleiben. Ich habe Ihr rotes Div hier absolut vertikal positioniert: (Vergessen Sie nicht, die Position relativ zum übergeordneten Div hinzuzufügen. Es muss anders als die statische Standardeinstellung positioniert werden):
js Geigenstift hier
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%; }
quelle
Sie können auch einen zusätzlichen Block verwenden und den Übergang dafür verwenden, mit Ausnahme des untergeordneten Knotens
HTML Quelltext :
<div id="parent"> <div id="childrenWrapper"> <div id="children"></div> </div> </div>
CSS sollte so etwas sein
#parent { position: relative; width: 200px; height: 200px; background: #ff0; } #childrenWrapper{ width: 100%; height: 100%; } #children { width: 10%; height: 10%; background: #f00; }
quelle
Sie können das Element absolut positionieren und die Eigenschaft left und top verwenden, um den Prozentwert als übergeordnetes Element zu verwenden.
quelle
Es ist mit einer Positionierung versehen, die für das folgende URL- Arbeitsprobe erforderlich ist
body { margin: 0; width: 100%; height: 100%; } body>div { position: relative; width: 200px; height: 200px; background: #ff0; } body>div>div { position: absolute; left: 50%; top: 50%; width: 10%; height: 10%; background: #f00; transform: translate(-50%, -50%); }
Anmerkungen :
quelle
Die Lösung für dieses Problem besteht darin, überhaupt keine Übersetzung zu verwenden. Wenn Sie ein Element übersetzen, basiert der ausgewählte Prozentsatz auf seiner eigenen Höhe.
Wenn Sie das Element basierend auf der Größe des Elternteils positionieren möchten, verwenden Sie top: 50%;
Der Code sieht also folgendermaßen aus:
body { margin: 0; width: 100%; height: 100%; } body > div { width: 200px; height: 200px; background: #ff0; position: relative; } body > div > div { position: absolute; top: 50%; width: 10%; height: 10%; /* -webkit-transform: translateY(50%); */ background: #f00; }
quelle