Question

我正在学习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;
}

enter image description here

Answer 1

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

Answer 2

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

Answer 3

使用position：absolute - div / object的x和y将位于具有位置的父div / object。并且div中所有div /对象的位置为：absolute将在其父div上有一个x和y。

实施例

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

如果#a的位置是绝对的，你在#b上也使用position：absolute，＃b的x和y将位于#a的左上角（这就是为什么我们有顶部/底部和左/右，对吗？＆lt; - Lol

使用position：relative - div / object的x和y将与div / object相同。

我建议你把位置：相对（没有顶部/底部和左/右留下来）放到#container和position：relative或position：absolute in #container，这样你就可以轻松地将它们定位在你所在的地方想

如何设置相对于div的元素

3 个答案: