CSS Positionビジュアライザー

5つのposition値を切り替えて配置の変化を確認。top/left/bottom/rightをスライダーで調整してCSSをコピーできます

position
0px
0px
auto
auto
1
relative
参照
CSS
.element {
  position: relative;
  top: 0px;
  left: 0px;
  z-index: 1;
}

使い方

  1. position ボタンで値を切り替えてみよう（relative / absolute / fixed / sticky）
  2. top・left・bottom・right のスライダーを動かして対象要素（teal）の位置を確認しよう
  3. 「📋 CSSをコピー」ボタンでコードをコピーして、自分のスタイルシートに貼り付けよう！

CSS Positionをもっと詳しく学ぼう

関連ツール

📐 Flexboxビジュアライザー 🔲 CSSグリッドビジュアライザー ✨ CSS Transitionビジュアライザー 🌑 box-shadowジェネレーター

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ