2017-07-02 9 views
2

私はどのように作品の位置:htmlタグの相対的な好奇心です。誰でも説明できますか?それはドキュメントオブジェクトまたはこれに似たものに相対的な位置付けですか?相対的な位置にhtmlを設定する

<footer class="footer"> 
    <div class="container"> 
     <p class="text-muted">Place sticky footer content here.</p> 
    </div> 
    </footer> 

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 
+1

なぜガイドを読まないのですか?常にベストな選択です。 https://www.w3schools.com/css/css_positioning.asp –

+2

[こちら](http://www.barelyfitz.com/screencast/html-training/css/positioning/)は、CSSの配置を学ぶための良いチュートリアルです – Lal

+0

このチュートリアルのポイント4は、私がお礼をたくさん知りたいと思っていたものを私に説明しました – quimak

答えて

0

素子を配置し、その要素の位置を調整し、レイアウトを変更する(したがって、配置されていなかったであろう要素の空隙を残すことなくなかったかのようにこのキーワードは、すべての要素をレイアウトします)。

0

position: relative;の要素は、その通常位置に対して配置されます。

相対配置された要素の上、右、下、左のプロパティを設定すると、通常の位置から調整されます。他のコンテンツは、要素によって残された隙間に収まるように調整されません。

出典:あなたはhtmlタグとの相対位置を使用している場合https://www.w3schools.com/css/css_positioning.asp

0

実際にはどんな意味がありません。

position: relative; 

子をその親またはその隣接要素に対して配置します。

身体との相対的な位置:身体を親のhtmlと相対的に位置付けることができます。

さらなるヘルプが必要な場合はお知らせください

+1

その例はhttp://getbootstrap.com/examples/sticky-footer-navbar/で、位置はありません.htmlタグフッタの相対値は正しく動作しません。 @Lalはクールなガイドを投稿しました。私はポイント4で答えを見つけました。あなたはそれを試してみて、ブラウザの異なるサイズでちょっと遊ぶことができます。違いが分かります。 – quimak

関連する問題