一生ヘタレプログラマそれでもコードを書き続ける

技術的な知見や日々の記録、日常の些細な変化などを綴る雑記ブログです。専門的な技術解説から日記のようなライトな話題まで、特定のジャンルに縛られず、気になったことや面白いと感じた出来事を幅広く発信しています。筆者の視点で切り取った多様なコンテンツが楽しめる、自由な雑記空間を目指しています。

とりあえず、メモ

display: flex;

ーーーー

<html>
<style>
.flex {
display: flex;
}
</style>
<body>
<div class="flex">
<p>社長</p>
<p>部長</p>
<p>課長</p>
</div>
</body>
</html>

Safariでvideoタグの上にかぶせてうまく表示できない件

HTMLでコーディングしていて、動画の上に別のタグを重ねるデザインを実装したところ、Safariでの表示に問題が発生しました。他のブラウザでは正常に表示されるのに、Safariだけ動画の裏側に要素が表示されてしまい、困っていました。

原因として、z-indexの問題か、Safariのレンダリング順序の問題かと考え、調べてみました。

その結果、以下のCSSを追加することで、重ねて表示できるようになりました。

transform: translateZ(1px); /* 回避手段 */

この方法で、Safariでも動画の上に要素を正しく重ねて表示できるようになりました。