css_html/css_WEB-ITnose での位置の配置-htmlチュートリアル-php.cn

css_html/css_WEB-ITnose での位置の配置

WBOY

リリース： 2016-06-21 09:40:49

オリジナル

952 人が閲覧しました

css html

最初のコードを見てください

<html><head><style type="text/css">h2.pos_left{position:relative;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p></body></html>

ログイン後にコピー

レンダリング:

上記のコードを
に変更すると、

<html><head><style type="text/css">h2.pos_left{position:fixed;left:-20px}h2.pos_right{position:relative;left:20px}</style></head><body><h2>这是位于正常位置的标题</h2><h2 class="pos_left">这个标题相对于其正常位置向左移动</h2><h2 class="pos_right">这个标题相对于其正常位置向右移动</h2><p>相对定位会按照元素的原始位置对该元素进行移动。</p><p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p><p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p></body></html>

ログイン後にコピー

レンダリングは
になります
上記はすべて Chrome ブラウザでのデバッグ図です
専門家がこのコードが表示される理由を説明していますケース、ありがとう。

ディスカッションへの返信 (解決策)

h2.pos_left{position:fixed;left:-20px}

ログイン後にコピー

これは、絶対配置の一種である固定配置要素が元のドキュメントフローから分離されました。固定位置はビューウィンドウを基準にして配置されるため、ブラウザがどのようにスクロールしても同じ位置になります

fix を含むブロックはビューウィンドウであり、ドキュメントのフローには属しません。

XML/HTML コード?12345h2.pos_left{position:fixed;left:-20px}
これは、絶対配置の一種である固定配置です。固定配置された要素は、元のドキュメントフローから分離されています。固定位置はウィンドウを基準にして配置されるため、ブラウザがどのようにスクロールしても同じ位置になります
では、なぜ通常の位置にある 2 つの文の位置が逆になるのでしょうか

fix を含むブロックは window とドキュメントフローに属しません。
「これが正位置のタイトルです」以下の2文の位置が逆になっています。

2 階の eazyc からの返信を引用: fix を含むブロックはウィンドウであり、ドキュメントのフローに属しません。
「これが正位置のタイトルです」以下の2文の位置が逆になっています。

ブラウザウィンドウを小さくしてスクロールバーを表示すると、「固定位置」の意味が分かります

4 階の liulinisgood からの引用: 2 階の eazyc からの返信: fix を含むブロックはウィンドウであり、フロー文書に属しません。
「これが正位置のタイトルです」以下の2文の位置が逆になっています。

ブラウザウィンドウを小さくしてスクロールバーが表示されると、「位置固定」の意味がわかります
さて、試してみましたが、確かに固定は位置を変更せず、相対的に上に移動します。スクロールバーを下に押します。
ブラウザを最大化すると、2つの画像の2つの文の位置が逆になります。これは、基準に対して相対的に固定する必要があるため、CSSの固定段落の上にあるという理解が間違っていますか？つまり、2 番目のフレーム内の太字の 3 つの文の順序です)