親要素を基準に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 を応援していただければ幸いです。 |
推薦する
JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。
この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...
Webpack-cliが正常にインストールされたら、詳細についてはwebpack -vエラーケースを確認してください。
目次質問1. webpack webpack-cliをインストールする2. webpackのバージョ...
MYSQL 左結合の最適化 (10 秒から 20 ミリ秒)
目次【機能背景】 [生のSQL] 【独自SQL解析】 【分析手順】 [最適化されたSQL] 【最適化...
マージンのマージの問題を解決する
1. 兄弟要素の余白を結合する効果は次のようになります: (2 つの間の間隔は 150 ピクセルでは...
Docker インストール tomcat dubbo-admin インスタンス スキル
1. tomcatイメージをダウンロードする docker pull tomcat:8.5.29 2...
CSS3 でシンプルな白い雲が浮かぶ背景効果を実現
これは非常にシンプルな純粋な CSS3 の白い雲の浮遊する背景効果です。浮かぶ白い雲の特殊効果は、C...
Dockerコンテナ内でホストDocker操作を呼び出して実行する
まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...
CSS を使用して小さな画像をプルダウンし、大きな画像と情報を表示する方法
今日は、Taobao、JD.comなどのショッピングモールでよく使われている、小さな画像の上にマウス...
ロンボク実装 JSR-269
序文導入Lombok は、Google Guava と同様に便利なツールであり、強くお勧めします。す...
シンプルなウェブページレイアウトの構造と表現原理の共有
構造とパフォーマンスの紹介HTML 構造、CSS 表現、JavaScript 動作。Web ページの...
ユーザーがフォームを繰り返し送信するのを防ぐ方法の概要
重複したフォーム送信は、マルチユーザー Web アプリケーションで最も一般的で厄介な問題です。重複送...
CSSは親要素の下の最初の子要素を選択します（:first-child）
序文最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは...
Linux コマンドラインでパケットをキャプチャするために tcpdump を使用するいくつかの機能
tcpdump は、ネットワークの問題のトラブルシューティングに効果的に役立つ、柔軟で強力なパケット...
JavaScript 関数のパフォーマンスを測定するさまざまな方法の比較
目次概要パフォーマンス.nowコンソール.time時間精度を短縮注意事項分割して征服する入力値に注意...
MySQLデータのエクスポートとインポートに関する知識ポイントの簡単な分析
多くの場合、ローカル データベースのデータをエクスポートしたり、他のデータベースからデータをインポー...