親要素を基準にCSSの位置を絶対的に設定する方法についての簡単な説明
|
ご存知のとおり、CSS の絶対位置はデフォルトでドキュメントに応じて設定されます。たとえば、position:absolute の後に left:0 と top:0 を設定すると、要素はページの左上隅に表示されます。 親要素のコンテナ内で相対的な絶対位置を設定する必要がある場合もあります。 これを実現するには、親要素の position 属性を relative に設定する必要があります。 relative に設定した後は、left 属性と top 属性を設定しないでください。この時点では、親要素は relative ですが、元の位置のままです。 次に、子要素の位置を絶対位置に設定し、その left、top、right、bottom 属性を設定して、親要素に対する絶対位置になるようにします。 以下は HTML サンプル コードです。 <!doctypehtml>
<html>
<スタイル タイプ="text/css">
＃父親 {
位置: 相対的;
幅:600ピクセル;
マージン:自動;
高さ:400px;
border:1px 赤一色;
}
#息子1 {
位置: 絶対;
上: 0;
背景:#f0f0f0;
}
#息子2 {
位置: 絶対;
下部: 0;
背景:青;
}
</スタイル>
<本文>
<div id="父">
<div id="son1">私はson1です</div>
<div id="son2">私はson2です</div>
</div>
</本文>
</html>
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
推薦する
HTML初心者や初級者向けの提案。専門家は無視してかまいません。
感想:私はバックエンド開発者です。静的 (HTML) ページを取得すると、ページ構造と命名規則が極端...
JavaScript 円グラフの例
描画効果実装コードJavaScript var キャンバス = document.getElemen...
CSSスクロールバースタイル設定の実装
Webkit スクロールバー スタイルのリセット1. スクロールバーには、スクロールバー ボタンとト...
オンラインチャットを実現するVue+sshフレームワーク
この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...
MySQL パーティションテーブルの正しい使用方法
MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...
Linux ソフトウェアのインストール場所を確認する簡単な方法
1. ソフトウェアのインストールパスを確認します。 Linuxソフトウェアをインストールできる場所は...
Vueは単一ファイルコンポーネントの完全なプロセス記録を実装します
目次序文単一ファイルコンポーネント基本概念シンプルなローダーコンポーネントコンテンツの解析コンポーネ...
Docker を使用した nGrinder パフォーマンス テスト プラットフォームの導入プロセスの分析
nGrinderとは何ですか? nGrinder は、スクリプトの作成、テストの実行、監視、結果レポ...
MySQL で SQL 文の実行時間を表示する方法
目次1. 初期SQLの準備2.MysqlはSQL文の実行時間をチェックします3. さまざまなクエリの...
MySQLの外部ネットワークアクセス権を開く方法
以下のように表示されます。主に認証コマンドを実行します: 2つの方法1. 任意のホストがユーザー b...
Mysql5.7 以降での ONLY_FULL_GROUP_BY エラーの解決方法
最近、開発プロセス中に、プロジェクト開発環境に接続されている MySQL データベースは Aliba...
JavaScriptオブジェクト指向について学ぼう
目次JavaScript プロトタイプチェーンオブジェクトプロトタイプトップレベルのプロトタイプOb...
ダイナミッククロックを実現するJS+CSS
この記事の例では、動的な時計を実装するためのJS + CSSの具体的なコードを参考までに共有していま...
TomcatはNginxリバースプロキシのクライアントドメイン名を取得します
質問Nginx リバース プロキシの後、Tomcat アプリケーションは、クライアント ブラウザーの...
大規模な Vue.js プロジェクトの構築と維持のための 10 のベスト プラクティス
目次1. スロットを使用してコンポーネントを理解しやすくし、より強力にする2. Vuexストアを正し...