0

相対位置と絶対位置について調べましたが、いずれかの位置を選択した後に「上、左、右、下」を指定しないとどうなるかについてまだ混乱しています。たとえば、以下のコードでは、コンテナーの位置を変更し、フッターを相対から絶対に変更すると、ファンキーな処理が行われます。「position:relative」を追加して方向を指定しないと、意図した場所に正確に留まると読みました。しかし、firebug を使用して、CSS でその行を切り替えたところ、上部のメニュー バーが少し左に移動しました。何が起こっている？

HTML:

    <div class="container">

        <div id="header">

            <ul id="menu">
                <li><a href="#" class="active">Portfolio</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Request a Quote</a></li>
            </ul>       

            <div id="logo">
                <h1>Creatif</h1>
                <small>A Family of Rockstar Wordpress Themes
            </div>
        </div><!--end header-->

        <div id="block_feature">
        Featured Content
        </div>      

        <div id="block_content">
        Content

        </div>

    </div>

</div>


<div id="footer">

    <div class="container">
        Footer stuff goes here
    </div>
</div>

CSS:

@charset "UTF-8";  
/* Background-Styles */  

body {  
    margin:0px; padding:0px;  
    background-color:#131211;  
 }  
#main {  
    background:#c4c0be url(images/background_light_slice.jpg) repeat-x;  
}   
#main .container {  
    background-image:url(images/background_light.jpg);    
    background-repeat:no-repeat;  
    min-height:400px;  
}  

#header {  
    padding-top:20px;  
 }  
#logo h1, #logo small {  
    margin:0px;  
    display:block;  
    text-indent:-9999px;  
}  
#logo {  
    background-image:url(images/logo.png);  
    background-repeat:no-repeat;
    width:194px;  
    height:83px;  
}  
ul#menu {  
    margin:0px; padding:0px;  
    position:absolute;  
    right:0px;  
}  
ul#menu li {  
   display:inline;   
}




#footer {  
    background-image:url(images/background_footer.jpg);  
    background-repeat:repeat-x;  
    color:white;  
    padding:40px;  
}  
.container {  
    width:950px;  
    margin:0 auto;  
    position:relative;  
}

位置付き:相対 ここに画像の説明を入力

位置付き: 絶対 ここに画像の説明を入力

4

2 に答える 2

1

コンテナは相対位置に対して絶対的である必要があるため、 #footer div を相対位置に設定する必要があります。現在、フッターは相対的ではないため、#container は親に最も近い相対的な div にデフォルト設定されます。経験則として、絶対配置を使用する場合は常にコンテナー div を相対にすることです。

#footer {position: relative; }
#container { position: absolute; }

コンテナに top: 0 を追加すると、フッターに top: 0 が追加されます。

于 2012-05-25T03:25:20.473 に答える
0

チャドの答えは正しいです。説明は次のとおりです。

絶対位置を使用するように div を設定すると、位置が絶対または相対のいずれかである最初の親ノードに対して絶対になります。

あなたの例では、親ノードが相対的または絶対的な位置に設定されていないため、ノードはボディに対して絶対的でした。Chad が述べたように、参照ノードを必ず position: relative に設定してください。

于 2012-05-29T07:10:26.210 に答える