X- und Y-Prozentwerte basierend auf Höhe und Breite der Elemente übersetzen?

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?

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

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:

Eine interessante Sache bei CSS-Transformationen ist, dass sie beim Anwenden mit Prozentwerten diesen Wert auf den Dimensionen des Elements basieren, auf dem sie implementiert werden, im Gegensatz zu Eigenschaften wie oben, rechts, unten, links, Rand und Abstand , die nur die Dimensionen des Elternteils verwenden (oder bei absoluter Positionierung das nächstgelegene relative Elternteil verwenden).

Sie 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);
  }
}

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:

• Die obere und linke Position verschieben das untergeordnete Widget gemäß den übergeordneten Koordinaten. Die obere linke Ecke des untergeordneten Widgets wird genau in der Mitte des übergeordneten Widgets angezeigt (dies ist derzeit nicht das, was wir wollen).
• Durch die Übersetzung wird das untergeordnete Widget je nach Größe um -50% nach oben und links verschoben (nicht das übergeordnete Widget). Dies bedeutet, dass der Mittelpunkt des Widgets genau dort verschoben wird, wo sich der obere linke Punkt befand - der zuvor als Mittelpunkt eines übergeordneten Elements eingerichtet wurde, und das ist, was wir wollen.

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.

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%;
    }

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;
}

Sie können das Element absolut positionieren und die Eigenschaft left und top verwenden, um den Prozentwert als übergeordnetes Element zu verwenden.

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 :

1. Sie können Ihr rotes Quadrat absolut positionieren, indem Sie das übergeordnete Element in die relative Position ändern
2. Wenn Sie dann 50% oben und 50% links verwenden, wird das rote Quadrat entsprechend der oberen linken Ecke positioniert
3. Mit transform: translate (-50%, - 50%) wird das rote Quadrat entsprechend seiner Mitte positioniert

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;
}