web-css-design https://blog.hatena.ne.jp/web-css-design/ Web白描 - 自宅学習用ブログ https://web-css-design.hatenadiary.jp/ ★コーディング基礎 ★AI position を設定 プロンプト例 positionを設定するポイント 「どこを基準に配置するのか」を理解することです。 ① 基準（基点）を理解する position の種類によって 位置の基準が変わります。 position 基準 static 通常の配置 relative 自分の元の位置 absolute 親要素 fixed 画面（ブラウザ） sticky スクロール位置 .box { position: relative; top: 20px; left: 30px; } 👉 元の位置から 下20px / 右30px 移動 ② absolute を使う時は「親に relative」 … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fweb-css-design.hatenadiary.jp%2Fentry%2F2026%2F02%2F20%2Fposition_%25E3%2582%2592%25E8%25A8%25AD%25E5%25AE%259A" title="position を設定 - Web白描 - 自宅学習用ブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20260315/20260315200538.jpg Hatena Blog https://hatena.blog 2026-02-22 00:00:00 rich https://web-css-design.hatenadiary.jp/entry/2026/02/20/position_%E3%82%92%E8%A8%AD%E5%AE%9A 1.0 100%