html - 无法移动 css div 中的元素

Question

出于某种原因，我有一个名为 banner 的父 div，其中包含许多子 div，但是在我的 css 样式表中，我似乎无法将任何元素尤其是“CRAFT412” Logo 图像移动到横幅中我想要的位置.我试过使用左/右/上/下移动这些元素，但似乎没有任何改变。如果有人可以在这里帮助我，我将不胜感激。

这是我网站上某个页面的 HTML

<!--TOP BANNER SECTION-->

    <div id="banner">

        <div id="logo"> 
            <img src="images/CRAFT412 - Logo.png" width="500" height="281" alt="CRAFT412">
        </div>

        <div id="ip_box"></div>

        <div id="ip_text">
            <p>SERVER IP<P/>
            <p>craft412.serveminecraft.net<P/>
        </div>

        <div id="teamspeak_box"></div>

        <div id="teamspeak_box_2"></div>

        <div id="teamspeak_text">
            <p>TEAMSPEAK<P/>
        </div>


        <div id="teamspeak_image"> 
            <a href="ts3server://craft412.serveminecraft.net:9987">
                <img src="images/CRAFT412 - Box - Teamspeak.png" alt="TEAMSPEAK">
            </a>
        </div>                                    
    </div>

这也是我的相同 div 的 CSS

/*CSS FOR ALL PAGES*/

/*BODY/WRAPPER SECTION*/

body {
    background:#EEEEEE;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#wrapper {
    width: 1750px;
    margin: 0 auto;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0px 1.5px 2px 0px;
    border: 1.5px solid #E0E0E0;
    color: #E0E0E0;
}

/*TOP BANNER SECTION*/

#banner { height:100px; }

#logo {}

#ip_box {
    width:200px;
    height:43px;
    background:#212121;
    border-radius: 5px;
    box-shadow: 1px 1px 5px;}

#ip_text {
    color: white;
    font-size: 15px;
}

#teamspeak_box {
    width:159px;
    height:43px;
    background:#212121;
    border-radius: 5px;
    box-shadow: 1px 1px 5px;
}

#teamspeak_box_2 {
    width:43px;
    height:43px;
    background:#313131;
    border-radius: 5px 0px 0px 5px;
}

#teamspeak_text { color: white; }          

#teamspeak_image {}

Answer 1

给父div一个属性:

Position:relative;

同时将属性赋予子div:

Position:absolute;

现在您可以更改“BANNER”div 中子div 的位置。通过使用 TOP 、BOTTOM、RIGHT、LEFT