position-bottom 在 devtools 中是什么意思？

Question

我正在使用 Velocity.js 试验一些变换和动画。其中一个动画缩放绝对定位的元素，但出于某种原因，我无法使元素居中。

根据 Firefox Developer Edition 的 devtools，元素上有一个负数 position-bottom 和 position-right，但我不知道它是从哪里来的。它的父级是静态定位的，它只是一个常规的 div 和 height: 100%。

这些可能来自哪里？

相关 div 的计算样式（缩放时）：

background-color: rgb(0, 0, 0);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
box-sizing: border-box;
color: rgb(9, 29, 35);
font-family: "PT Sans", sans-serif;
font-size: 16px;
height: 2139.52px;
left: 0px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
position: absolute;
top: 0px;
transform: matrix(0.00870397, 0, 0, 0.00870397, 0, 0);
width: 2139.52px;

和父级的计算样式 div:

box-sizing: border-box;
color: rgb(9, 29, 35);
font-family: "PT Sans", sans-serif;
font-size: 16px;
height: 944px;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
transform: matrix(1, 0, 0, 1, 0, 0);
width: 1920px;

Here's a jsbin供参考。大黑方块应该居中，但不知为何不是。

Answer 1

您可以使用下面的 css 到 div:

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width: auto;
margin:0 auto;

Answer 2

回答你的问题标题：

position-bottom 表示当前元素与其紧邻位置 parent 之间的像素距离（在本例中为 body 标签 becomes the parent 因为 black-box 的前一个 parent 没有被定位，即 都被定位为静态 [默认] ).

为什么是负值？距离不应该是正数吗？鉴于黑盒的尺寸小于 parent?

它应该是正常的，但您创建了一个比 parent 元素大的框，并使用变换属性将其缩小。所以当 left = 0 和 top = 0 时，定位的是超大未缩放 child，而不是缩小版

我来解释负底仓位的数学运算：

bottom-position = parentHeight - childOriginalHeight 
right-position = parentWidth - childOriginalWidth

解法：

定位你的parent元素（位置：相对/绝对） [参考相对与绝对：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/]
现在使用此 CSS 将黑框居中

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

注：

(top = 50% and left = 50% css 属性，定位 child 的边界 （parent 从顶部和左侧的尺寸的 50% ) 相对于 parent 的边界，其中 transform - translate 移动元素，（该元素顶部和左侧尺寸的 -50%） 从该元素的中心）。 参考： https://css-tricks.com/centering-percentage-widthheight-elements/
记住多个变换一行指令是applied from right to left
所以缩小你的元素（记住首先应用右边的变换）然后翻译它（这就是你想要做的). .

position-bottom 在 devtools 中是什么意思？

What does position-bottom mean in devtools?

html

css

css-position

velocity.js