見出しを常に枠の上から半分だけ出して表示させたい

Question

前提・実現したいこと

上記画像のように、ウィンドウサイズを変えても見出しを枠の上から半分だけ出したいのですがどのようなcssを書けばいいでしょうか。

該当のソースコード

<div class="flowbox">
<div class="step">STEP<strong>1</strong></div>
</div>

.flowbox{
position:relative;
}
.flowbox .step{
position:absolute;
top:-20%;
left:0;
}
.flowbox .step strong{
font-size:6vw;
}

上記のようにpositionで指定しても、ウィンドウサイズを変えると位置がずれてしまいます。
アドバイス・ご教授いただけますでしょうか。

Comments

[kyoya0819]

strongにCSS当ててると思うのでご提示お願いします。

[azuapricot]

HTML、CSSはこれで全部ですか？再現できるコードをご提示下さい

[m.ts10806]

どうずれているのか画面キャプチャをご提示ください。
あとできればHTMLもCSSも全てあったほうがいいですね

[yoshinavi]

提示のコードは、提示画像のようなレイアウトになりますか？

Answer 1

position使わなくても

.flowbox .step {
  transform:translate(-0.2rem, -1rem);
}

を使えばいける
尚translate(X軸の正の方向に移動する距離, Y軸の正の方向に移動する距離)なのではみ出す時は必ず負の値を指定してください。
まぁ、グラフを思い浮かべばわかると思います。

positionでうまくいかないのは20%のせいremとか使えばうまくいくかも

追記

kei344さんのご指摘通り-50%がいいと思います。

.flowbox .step {
  transform:translateY(-50%);
}

Comments

[kei344]

上下だけなら translateY(-50%) でもよさそう。（XYを間違えたので編集しました）

[kyoya0819]

そうですね編集しときます。