ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose での位置の配置
css_html/css_WEB-ITnose での位置の配置
- WBOYオリジナル
- 2016-06-21 09:40:49912ブラウズ
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 つの文の順序です)
position: fixed;
これは、この時点では、ドキュメント フロー スペース、つまり「e6bf176d474c797a3569c343775212642e9b454fa8428549ca2e64dfac4625cd" の設定は固定です 配置後、スペースが解放されます。 このとき、次の H2 要素が pos_left のドキュメントスペースを占有し、ご覧のような現象が現れます
ぜひご覧ください
http://www.w3school.com.cn/css +