Что означает позиция внизу в devtools? - PullRequest
Новая
       28

Что означает позиция внизу в devtools?

1 голос
/ 16 марта 2019

screenshot of devtools

Я экспериментирую с некоторыми трансформациями и анимациями, используя Velocity.js.Одна из анимаций масштабирует элемент, который был абсолютно позиционирован, но по какой-то причине я не могу поместить элемент в центр.

Согласно devtools Firefox Developer Edition, есть отрицательные значения 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;

Вот справочник jsbin .Большой черный квадрат должен быть в центре, но это не по какой-то причине.

Ответы [ 2 ]

2 голосов
/ 16 марта 2019

Чтобы ответить на заголовок вашего вопроса:

position-bottom обозначает расстояние в пикселях между текущим элементом и его непосредственно расположенным родителем (в этом случае тег body становится родительским как нет предыдущий родительский элемент черного ящика позиционируется, т.е. все они статичны [по умолчанию] ).

Почему же отрицательное значение? не должно ли расстояние быть положительным? учитывая размеры черного ящика меньше, чем у родителя?

Это должно быть нормально, но вы создали прямоугольник, который больше, чем родительский элемент, и уменьшили его, используя свойства преобразования. Поэтому, когда left = 0 и top = 0, позиционируется супер большой немасштабированный дочерний элемент, а не уменьшенная версия.

Я объясню математику отрицательной нижней позиции: 

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

Решение:

  1. Позиция вашего родительского элемента (позиция: относительная / абсолютная) [относительная относительная и абсолютная: https://css -tricks.com / абсолютная-относительная-фиксированная-позиция-как-то-они-отличаются /]
  2. Теперь используйте этот CSS для центрирования вашего черного ящика 

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

Примечание:

  1. ( top = 50% и left = 50% css свойства, позиционируйте границы ребенка (50% размеров родителя сверху и слева) относительно границ родителя, где transform - translate перемещает элемент, (- 50% размеров этого элемента сверху и слева) от центра этого элемента). см .: https://css -tricks.com / centering-процента-widthheight-elements /
  2. Имейте в виду, что директивы множественного преобразования в одну строку применяются справа налево
  3. Так что уменьшите масштаб вашего элемента (, помните, что преобразования справа применяются сначала ), а затем переведите его (, что вы пытаетесь сделать ). .
0 голосов
/ 16 марта 2019

Вы можете использовать этот CSS ниже для div: 

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