親要素を基準に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 を応援していただければ幸いです。 |
推薦する
MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例
MySQLはトリガーを使用してデータベース内のテーブルの行制限を解決します。詳細な説明と例最近のプロ...
MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する
序文全文インデックスを使用できるのは Innodb と MyISAM ストレージ エンジンのみです ...
ドラッグ可能で編集可能なガントチャートの詳細な説明（HighchartsはVueとReactで使用できます）
序文Excel は強力で、広く使用されています。 Web アプリケーションの登場と改善に伴い、ユーザ...
Vue nextTickの原理の分析
目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...
制限を使用すると、MySQL のページングがどんどん遅くなるのはなぜですか?
目次1. テスト実験2. 制限ページング問題に対するパフォーマンス最適化手法2.1 テーブルをカバー...
Javascript のスコープとクロージャの詳細
目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...
モバイル端末での Vue2.x Picker のグローバル呼び出し実装
目次ピッカーコンポーネントとはピッカーコンポーネントの問題解決オプションの説明解決ディレクトリ部門P...
背景とリンクとして画像を書き込む方法（背景画像＋リンク）
写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...
CSS3 box-shadow プロパティの詳細な例
CSS3 - 影の追加（ボックスシャドウの使用） CSS3 - div またはテキストに影を追加する...
Linux での NTP サーバー設定の詳細な手順
目次1. 環境設定1.NTPサーバー2. ビジネスサーバー2. NTPサーバーの設定1. chron...
Confluence と jira-software を Docker にデプロイする方法
バージョン: セントロス==7.2 jdk==1.8 合流==6.15.4 jira-ソフトウェア=...
Linuxディレクトリ構造の詳細な紹介
Linuxを学び始めるときは、まずLinuxの標準ディレクトリ構造を理解する必要があります。 / r...
HarborをベースにしたDocker専用倉庫の構築方法
目次1. ハーバーの紹介1. ハーバーが民間倉庫を建設3. 港湾の維持管理4. Harborユーザー...
CSS クロスブラウザ スタイルのバグのデバッグについて
まず最初に、適切なブラウザを選択します。私が Chrome を選択したのは、その強力なデバッグ ツー...
jQueryはフォーム検証機能を実装します
jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...