Css 如何使嵌套div在缩放时与父对象一起移动

所以我看到的所有帖子都是关于让你的元素不调整大小或移动，但我的问题是我的元素不会调整大小或移动。名为headLogo的div包含徽标作为背景，在浏览器中放大或缩小时，该div不会与包含徽标的父div一起移动/调整大小

以下是CSS：

#headContainer {
height: 134px;
background-image: url('images/main-bg.jpg');
background-repeat: repeat-x;
overflow: hidden;}

#headWhiteImage {
position: relative;
height: 134px;
background: url('images/header-bar.png') no-repeat 50% 0 transparent!important;
z-index: 10;}

#headLogo {
position: absolute;
height: 62px;
width: 333px;
background: url('images/logo2.png') no-repeat;
left: 133px;
top: 10px;

#headContainer {
height: 134px;
background-image: url('images/main-bg.jpg');
background-repeat: repeat-x;
overflow: hidden;
}

#headWhiteImage {
position: relative;
height: 134px;
background: url('images/header-bar.png') no-repeat 50% 0 transparent!important;
z-index: 10;
}

#headBarContainer {
position: relative;
height: 75px;
width: 960px;
background-color: transparent;
margin: 0 auto; 
padding-top: 10px;
}

#headLogo {
height: 62px;
width: 333px;
background: url('images/logo2.png') no-repeat;
float: left;
margin-left: -27px;
}

以下是HTML：

 <div id="headContainer">
<div id="headWhiteImage">
    <div id="headLogo">
        </div>
    <div id="headMenu">
    </div>
</div>
 </div> 

---

我想出来了。要定位徽标，它需要位于容器中，然后浮动实际徽标，使其随着缩放移动

以下是HTML：

    <div id="headContainer">
        <div id="headWhiteImage">
            <div id="headBarContainer">
                <div id="headLogo">

                </div> 
                <div id="headMenu">

                </div>
            </div>
        </div>
    </div>