borderを細かく設定した時のposition

Question

<div class="a">
  <div class="b"></div>
</div>

となっているとき

.a, .b{
  width: 100px;
  height: 100px;
}
.a{
  position: relative;
  outline: 1px solid teal;
}
.b{
  position: absolute;
  transform: translateX(-50%) translateY(-50%);
  top: 50%;
  left: 50%;
  outline: 1px solid blue;
}

とすると当然aとbはぴったり一致します。
ここで

border-right: 50px solid red;
border-bottom: 50px solid blue;
border-left: 50px solid green;

を加えるとこのように

ずれます。

なぜでしょうか？なにか代替の方法ありますでしょうか？
この後回転をしたりの処理を考えているので

transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 50%;

は必須です。

よろしくお願いいたします。

Comments

[kei344]

https://jsfiddle.net/z064vxag/ 提示のコードでは問題が再現しません。

[annaPanda]

説明不足すみません。
加えるのは.aにです。

[hatena19]

.aに加えても当方でも再現しませんでした。
box-sizing: border-box;も追加すると提示の画像とは逆に.bが上にずれました。
chromeで確認してます。

Answer 1

下記のコードで結果を確認してみてください。

.a, .b{
  width: 100px;
  height: 100px;
  box-sizing: border-box;
}
.a{
  position: relative;
  outline: 1px solid teal;
  border-right: 50px solid red;
  border-bottom: 50px solid blue;
  border-left: 50px solid green;
}
.b{
  position: absolute;
  /*transform: translateX(-50%) translateY(-50%);*/
  top: 0;
  left: 0;
  outline: 1px solid black;
}

position: absolute;の基準点はbox-sizing: border-box;でもborderの内側ということが確認できます。(chromeで確認)

ここから、

  top: 50%;
  left: 50%;

と変更すると、下へ25px分移動します。
つまり、.bのサイズは幅0px、高さ50px(borderの内側)と解釈されているということです。

それに対してtransform: translateは幅100px、高さ100px(borderの外側)で解釈しているようです。

この解釈の違いが原因でずれるのだと推測されます。

そういう仕様だとして対応するしかないのでは。
例えば、

  top: calc(50% + 25px);
  left: 50%;

Comments

[annaPanda]

なるほど詳しい説明ありがとうございます。
.aと.bを兄弟要素にしてやってみます。