ホームページ > 記事 > ウェブフロントエンド > Position_html/css_WEB-ITnose の相対位置と絶対位置
Position_html/css_WEB-ITnose の相対位置と絶対位置
- WBOYオリジナル
- 2016-06-24 11:41:301422ブラウズ
親コンテナが相対コンテナの場合、子コンテナは絶対コンテナに設定されます。
子コンテナを絶対に設定し、親コンテナを相対に設定する必要があるのはなぜですか???
親要素と子要素の両方に Relative を使用することはできませんか? ? ?
ポジションを使用することと、フロートとマージンを使用することの長所と短所は何ですか? ? ?
ディスカッションへの返信 (解決策)
親コンテナーが相対に設定されている場合にのみ、子コンテナーは親コンテナーに基づいて配置され、元の位置に対して相対的にオフセットされます。
相対
絶対
浮動小数点
マージン
それぞれ何が達成されるのでしょうか?
それを書き留めてください。問題は解決します
子コンテナを絶対に設定し、親コンテナを相対に設定する必要があるのはなぜですか?
このステートメントは厳密ではありません
子コンテナが絶対に設定されている場合、親コンテナは次のことを行うことができます。相対的か絶対的であるか
絶対的 親コンテナ内での絶対的な配置です
相対的 ドキュメントフローのデフォルト位置を基準とした相対的な配置です
りーっ
4階の説明がとても良く、デモも効果も良いです。
簡単に言うと、position 属性には参照オブジェクトが必要です。Absolute はドキュメント フローから切り離され、幅と高さを占有しません。一般に、絶対配置には固定の幅と高さが必要です。そうでない場合、コンテンツは表示されません。
相対的な配置には幅と高さが必要です。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html> とても良いですね、参考にしていただけます
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>有三种布局：1. 行布局（默认布局方式）；2. 列布局（使用float）；3. 定位布局（使用position）在定位布局中，需要搞清楚两个问题：1. 目标；2. 参照物。当使用绝对定位时，必须指定参照物，然后进行定位；而成为参照物的条件是：1. 是目标元素的父元素或祖先元素；2. position属性的值不能为static（默认值）。成为参照物的元素，其position属性值可以是 absolute、relative、fixed；其中relative是最常见的，因为将元素的position属性设置为relative，不会使该元素从标准的文档流脱离出来（也就是没什么影响）。<style type="text/css"> .relObj { position: relative; } .absObj { position: absolute; } .container {width: 300px; height: 200px; border: solid 1px gray; } .closeBtn {color: red; font-weight: bold; cursor: pointer; top: 1px; right: 1px; }</style><div class="container relObj"> <div class="closeBtn absObj">X</div></div></body></html> ありがとうございます。ドキュメントフローから要素を作成するために「絶対」が使用されているかどうか、もう一度質問したいのですが、その場合、その子要素もドキュメント フローから切り離されますか? ? ?