Перевод элементов Y-ось 50% сдвинет ее на 50% от собственной высоты, а не на 50% от высоты родителей, как я ожидал. Как сообщить переводному элементу, чтобы он основывал его процент переводов на родительском элементе? Или я что-то не понимаю?
Переводить X и Y процентные значения на основе высоты и ширины элементов?
Ответ 1
При использовании процента в переводе это относится к ширине или высоте самого себя. Взгляните на https://davidwalsh.name/css-vertical-center (demo):
Одна интересная вещь о преобразованиях CSS заключается в том, что при применении их с процентными значениями они основывают это значение на размерах элемента, который они реализуют, в отличие от свойств, таких как верхний, правый, нижний, левый, маржи и отступы, которые используют только родительские размеры (или в случае абсолютного позиционирования, в котором используется его ближайший относительный родитель).
Ответ 2
Вы можете использовать vw и vh для перевода на основе размера окна просмотра
@keyframes bubbleup {
0% {
transform: translateY(100vh);
}
100% {
transform: translateY(0vh);
}
}
Ответ 3
Что для меня работает только с 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%);
}
Как это работает:
- верхнее и левое позиционирование перемещают дочерний виджет в соответствии с родительскими координатами. Детский виджет верхнего левого угла появится точно в центре родителя (это не то, что мы хотим в это время).
- перевод будет перемещать дочерний виджет -50% вверх и слева в зависимости от его размера (а не родительского). Это означает, что точка центра виджета будет перемещаться точно там, где была верхняя левая точка, которая ранее была настроена как центр родителя, и это то, что мы хотим.
Ответ 4
Чтобы использовать процент в свойстве translate, вы должны использовать Javascript: http://jsfiddle.net/4wqEm/27/
Код HTML:
<div id="parent">
<div id="children"></div>
</div>
Код CSS:
#parent {
width: 200px;
height: 200px;
background: #ff0;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
Код 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)";
Надеюсь, я смогу помочь вам и скажу, если у вас возникнут другие проблемы.
Ответ 5
Ваше утверждение абсолютно верно в отношении процентов, поступающих от самого переведенного элемента. Вместо использования свойства translate в вашем случае вы должны использовать абсолютное позиционирование, чтобы оставаться относительно родительского div. Я абсолютно позиционировал вертикально ваш красный div здесь: (не забывайте о добавлении позиции относительно родительского div.It нужно позиционировать, кроме статического по умолчанию):
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%;
}
Ответ 6
Вы также можете использовать один дополнительный блок и использовать для него переход, за исключением дочернего узла
Код HTML:
<div id="parent">
<div id="childrenWrapper">
<div id="children"></div>
</div>
</div>
css должно быть что-то вроде этого
#parent {
position: relative;
width: 200px;
height: 200px;
background: #ff0;
}
#childrenWrapper{
width: 100%;
height: 100%;
}
#children {
width: 10%;
height: 10%;
background: #f00;
}
Ответ 7
Вы можете сделать элемент абсолютным и использовать свойство left и top для получения процентного значения в качестве родительского.
Ответ 8
Его разветвлено с позиционированием, требуемым по следующему рабочему образцу URL
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%);
}
заметки:
- вы можете абсолютное позиционирование вашего красного квадрата, изменив родительский элемент на относительную позицию
- то использование 50% верхней и 50% левой позиции будет позиционировать красный квадрат в соответствии с его верхним левым углом
- используя transform: translate (-50%, -50%) будет позиционировать красный квадрат в соответствии с его центром
Ответ 9
Решение этой проблемы заключается не в том, чтобы использовать перевод вообще. Когда вы переводите элемент, выбранный вами процент зависит от его собственной высоты.
Если вы хотите поместить элемент на основе родительской высоты, используйте top: 50%;
Таким образом, код будет выглядеть так:
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;
}