devtools 中的 position-bottom 是什么意思？答案

【问题标题】：What does position-bottom mean in devtools?devtools 中的 position-bottom 是什么意思？
【发布时间】：2019-08-07 04:21:16
【问题描述】：

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

根据 Firefox 开发者版的 devtools，元素上有一个否定的 position-bottom 和 position-right，但我不知道它来自哪里。它的父级是静态定位的，它只是一个带有height: 100% 的常规 div。

这些可能来自哪里？

有问题的 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 供参考。大的黑色方块应该居中，但不是出于某种原因。

【问题讨论】：

标签： html css css-position velocity.js

【解决方案1】：

回答您的问题标题：

position-bottom 表示当前元素与其直接定位的父元素之间的距离（以像素为单位）（在这种情况下，body 标签 becomes the parent 没有之前的父元素黑盒被定位，即 所有都被定位为静态 [默认]）。

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

正常情况下应该是这样，但是您创建了一个比父元素更大的框，并使用变换属性将其缩小。所以当left = 0和top = 0时，定位的是超大的未缩放的孩子，而不是缩小的版本。

我将解释负底部位置的数学：

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

解决方案：

定位你的父元素（位置：相对/绝对） [参考相对与绝对：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%和left = 50% css属性，定位孩子的边界（从顶部到左侧的 50% 的父级尺寸）相对于父级的边界，其中 transform - translate 从该元素的中心移动元素，（该元素尺寸的-50% 到顶部和左侧））。 参考： https://css-tricks.com/centering-percentage-widthheight-elements/
记住多个转换一行指令是applied from right to left
所以按比例缩小您的元素（请记住，首先应用右侧的转换）然后翻译它（这就是您想要做的）。 .

【讨论】：

【解决方案2】：

你可以使用下面的这个css到div：

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

【讨论】：