絶対配置を使用することはバッドプラクティスとみなされますか?[クローズド]
質問
私はあるウェブページを開発していました。そこでは、チェスのようなゲームのためのボードと、いくつかの駒のトレイをレイアウトしていました。これはすべて HTML を使用して行われます (ゲームの実行中に jQuery で動的に更新されます)。ページ内の要素の絶対配置を使用することは悪い習慣と考えられており、相対配置を使用することが望ましいという考えをどこかで持っていたのです。
あまりにも長い間、相対的な配置と格闘した後、私は、ボード要素の絶対的な配置が、正しく行うのがずっとずっと簡単であることに気づきました...そしてそれは実現されました。
相対的な配置が絶対的な配置よりも望ましいという理由を知っている人はいますか?どちらのアプローチを取るべきかを決定する際に適用するガイドラインや経験則はありますか?
どのように解決するのですか?
あなたが開発しているようなチェスのようなゲームでは、絶対配置を使用することに本質的な問題はありません。 おっしゃるとおり、相対配置と通常のフロー レイアウトでは、この種のタスクは非常に困難です。
もちろん、公共サービスを提供するサイトなど、より標準的な Web サイトを開発する場合は、絶対位置はブラウザのデフォルトのフロー レイアウトを上書きするので、多くのユーザーにとってのアクセシビリティを低下させます。 この場合、私はそれを避けたいと思います。
とはいえ、絶対配置のあまり知られていない利点は、ローカライズされた絶対配置を可能にすることです。 内に の中で、最も近い "positioned"の親要素に、局所的な絶対位置決めができることです。
注意してください。 positioned"要素は、relative, fixed, absolute, stickyのいずれかにすることができます。
説明するために
<div id="parentDIV" style="position:relative">
<div id="childDIV" style="position:absolute;left:20px;top:20px;">
I'm absolutely positioned within parentDIV.
</div>
</div>
ここで
childDIV
の左から20px、上から20pxに配置されています。
parentDIV
,
は
を文書全体に適用することができます。 これにより、ページ全体のフロー・レイアウトを犠牲にすることなく、ページ上のネストされた要素を正確に制御することができます。
ご質問(絶対配置よりも相対配置の方が望ましい)にお答えします。何を構築する必要があるかによって異なります。 しかし、一般的な位置決め (絶対または相対) とデフォルトのフロー レイアウトの比較では、私のアプローチは上記のとおりです。
関連
-
[解決済み] bootstrapでボタンにリンクを貼るには?
-
[解決済み] cssのfit-contentで横幅を自動サイズ調整する
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] <button> vs. <input type="button" />. Which to use?
-
[解決済み] インラインCSSでa:hoverを記述するには?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] クリアフィックスとは何ですか?
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] hr要素の色を変更する
-
[解決済み] 位置は絶対だが、親に対して相対的
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] CSS 背景の不透明度 [重複]について
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] MIME-typeが原因でスタイルシートが読み込まれない
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか?
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)