Position_html/css_WEB-ITnose の相対位置と絶対位置-htmlチュートリアル-php.cn

Position_html/css_WEB-ITnose の相対位置と絶対位置

WBOY

リリース： 2016-06-24 11:41:30

オリジナル

1484 人が閲覧しました

親コンテナが相対コンテナの場合、子コンテナは絶対コンテナに設定されます。

子コンテナを絶対に設定し、親コンテナを相対に設定する必要があるのはなぜですか???

親要素と子要素の両方に 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>

ログイン後にコピー

ありがとうございます。ドキュメントフローから要素を作成するために「絶対」が使用されているかどうか、もう一度質問したいのですが、その場合、その子要素もドキュメントフローから切り離されますか? ? ?