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

如果您使用绝对定位，则框内的所有元素将保持相对于包含框的定位，因为您将包含框设置为“位置：相对”。就此而言，您也可以将它们相对定位在容器内。

于 2012-05-24T23:00:16.530 回答
0

是的。您只需将橙色框的位置设置为相对（或绝对），您就可以相对于框角定位框中的元素。

于 2012-05-24T23:01:49.823 回答
0

通过使用 position:absolute - div/object 的 x 和 y 将位于具有位置的父 div/object。并且该 div 内的所有具有 position: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 相同。

我建议您将 position:relative (w/o top/bottom & left/right 留在原地) 和 position:relative 或 position:absolute 放在 #container 中，这样您就可以轻松地将它们放置在您想要的任何位置

于 2012-05-25T00:08:49.077 回答