0

私はHTML/CSSを学んでいて、コンテナに関連する要素を設定する方法を見つけるのに少し問題があります。

「相対的」と「絶対的」なポジショニングの違いについて読みました。「相対」配置。デフォルトの位置を基準にして要素を配置します。ただし、コンテナ（この場合はオレンジ色のボックス）を基準にして要素を配置する方法はありますか？

たとえば、すべてのテキストとimgをオレンジ色のボックス内に配置する方法はありますか？オレンジ色のボックスを移動することにした場合は常に、内部のすべての要素が配置されたままになりますか？

HTML：

        <div class="container">


        <div id="snappyText">
            <p>Ever think,"Where are the most mediocre places to eat around here? I want me some of that."</p>
        </div>
        <div id="response">
            <p>-Yeah, neither do we.</p>
        </div><!--end Snappy Text-->

        <div id="iphonePic">
            <img src="images/iphone.png" alt="phone" />
        </div><!--end iphonePic-->

        <div id="dashVideo">
            <img src="images/videoThumbnail.png" alt="video" />
        </div><!--end dashVideo-->

        <div id="appStoreIcon">
            <img src="images/appstore.png" alt="appstore" />
            <!--<img src="images/free.png" alt="free" />-->
        </div><!--end appStoreIcon-->

        <div id="explanatoryText">
            <p>Dash is the quickest way to find good places to eat. In a world with too many choices and too much information, Dash clears the clutter and offers only the best in your area.</p>  
        </div><!--end explanatoryText-->

        <ul id="menu">
            <li><a href="about.html">About</a></li>
            <li><a href="http://boxoutdev.com/">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>

        <div id="socialMedia">
            <a href="http://twitter.com/#!/thedashapp"><img src="images/twitter.png" alt="twitter" /></a>

            <a href="http://www.facebook.com/"><img src="images/facebook.png" alt="facebook" /></a>
        </div><!--end socialMedia-->

    </div><!--end container-->

CSS：

#logo{
display:block;
margin-left:auto;
margin-right:auto;
position:relative;
top:40px;
}
#main .container{
background-image: url(images/orangeBackground.png);
background-repeat: no-repeat;
top:90px;
}

/*orange box*/

#snappyText{
color:white;
font-size:30px;
font-family:Helvetica;
font-weight:lighter;
padding-top:30px;
padding-left:50px;
padding-right:50px;
line-height:30px;

}

#response{
color:white;
font-size:40px;
font-family:Helvetica;
font-weight:lighter;
padding-left:260px;
padding-right:50px;
padding-top:50px;

}

#iphonePic{
position:relative;
left:64px;
bottom:-50px;
}

#dashVideo{
position:relative;
left:350px;
top:-460px;
}

#appStoreIcon{
position:relative;
left:350px;
top:-420px;
}

ここに画像の説明を入力してください

4

3 に答える 3

1

絶対配置を使用する場合、ボックスを含む要素を「position：relative」に設定するため、ボックス内のすべての要素は、含むボックスに対して相対的な位置に留まります。さらに言えば、コンテナ内に相対的に配置することもできます。

于 2012-05-24T23:00:16.530 に答える
0

はい。オレンジ色のボックスの位置を相対（または絶対）に設定するだけで、ボックスの角を基準にしてボックス内の要素を配置できます。

于 2012-05-24T23:01:49.823 に答える
0

position：absoluteを使用することにより、そのdiv / objectのxとyは、位置を持つ親div/objectになります。そして、そのdiv内の位置：absoluteを持つすべてのdiv /オブジェクトは、親divにxとyを持ちます。

例

<div id="a">
    <div id="b">
    </div>
</div>

#aにposition：absoluteがあり、＃bでもposition：absoluteを使用すると、＃bのxとyは#aの上下の隅になります（そのため、上/下と左/右、右ですか？< - 笑

position：relativeを使用すると、そのdiv/objectのxとyはそのdiv/objectと同じになります。

＃containerにposition：relative（上/下と左/右なし）を配置し、＃containerの内側にposition：relativeまたはposition：absoluteを配置して、好きな場所に簡単に配置できるようにすることをお勧めします

于 2012-05-25T00:08:49.077 に答える