1

私がやりたいことをよりよく説明するために、私が使用しているコードとサンプル画像を含めました

 <style>
            body {
                border: 5px double black;
                font-family: Courier;
                text-align:center;}
            .homepage {
                width: 75%;}
            .logo {    /*the image that you are seeing being sent behind the text*/
                width: 150px;
                }
            #header { /*the id of the div that is has the class="img" file nested*/
                display:block;
                margin:auto;
                border-bottom: 2px solid black
                }
            #intro {
                position:relative;}
            
        </style>

これは私が現在持っているものですが、bottom-border下にスクロールしてもページに「接着」されたままになるように、その上にあるすべてのものを固定位置にしたいです。 前

position:fixed;これは、.logoセレクターを入れると得られるものです。

後

私は HTML/CSS を数日間しか学んでおらず、 を使用するかどうかを完全には理解していませんでしたdisplay。また、さまざまな状況で、また受講した Codecademy コースでもツールpositionを取り上げました。z-index私が構築したいものに対する解決策が何であるかわかりません。

4

2 に答える 2

1

固定ヘッダーを設定する方法の基本的な例を次に示します。

<div class="header">The header is here...</div>
<div class="main">The Main Story Is Here</div>

2 つのブロック レベル要素から始めます。1 つは固定され、もう 1 つはメイン コンテンツを含みます。

.header {
    border: 2px dotted gray;
    height: 50px;
    width: 100%;
    background-color: rgba(125,125,125,0.4);
    position: fixed;
    top: 0;
    left: 0;
}
.main {
    border-top: 2px solid red;
    margin-top: 60px;
}

いくつかの重要な要素は次のとおりですtop: 0。margin-top: 60px

あなたの宿題は、それらを微調整して、それらが何をするかを理解することです。

于 2013-06-12T01:48:55.280 に答える