料金はかかりますか？

CSS position解説は完全無料です。登録やログイン、課金、アプリのインストールは不要で、ブラウザがあればすぐに利用できます。

生成されたCSSコードはそのまま使えますか？

はい。CSS position解説が出力するCSSは標準仕様に準拠しており、CSSファイルやstyle属性にそのままコピー＆ペーストして使用できます。

デザイン・CSS無料登録不要

CSS position解説

CSSのpositionプロパティ(static/relative/absolute/fixed/sticky)の違いと使い方を解説する無料オンラインツール。

Input

Result

値          基準点          スクロール  通常フロー
──────────────────────────────────────────
static     通常位置         一緒       参加
relative   自分の元位置      一緒       参加(元の場所確保)
absolute   最寄りの positioned祖先  一緒  不参加
fixed      ビューポート       固定      不参加
sticky     スクロール閾値     閾値まで一緒→固定  参加

--- 使い分け ---
ヘッダー固定: position:fixed / position:sticky
モーダル:     position:fixed + inset:0
ツールチップ: position:absolute (親がrelative)
バッジ:       position:absolute; top:0; right:0;

--- z-index ---
auto = 0
モーダル背景: 40
モーダル本体: 50
ドロップダウン: 30
ヘッダー: 20
ツールチップ: 60

FAQ

よくある質問

画面の入力欄に処理したい値を入れるだけで、CSS position解説が即座に結果を表示します。コピーボタンで結果をワンクリックでクリップボードに送れます。

こちらもおすすめ

CSS display一覧

CSSのdisplayプロパティの値と挙動を比較解説する無料オンラインツール。

Flexboxガイド

CSS Flexboxの主要プロパティと値の早見表。レイアウト設計の参考に便利な無料オンラインツール。

CSS Gridガイド

CSS Gridの主要プロパティと値の早見表。2次元レイアウト設計に便利な無料オンラインツール。

CSS position値

CSS position値を表示する無料オンラインツール。CSS position値をブラウザ上で即座に実行でき、デザイン・CSSとして登録不要で利用できます。

border-radiusジェネレーター

CSSのborder-radiusをGUIで視覚的に調整。4隅個別・楕円形の角丸にも対応。コードをコピーしてすぐ使える無料オンラインツール。

Box Shadow生成

CSS box-shadowをGUIで直感的に作成。多重シャドウ、ニューモーフィズム、テキストシャドウにも対応。コード即コピーの無料ツール。

読み込み中...