Как получить вложенный div для перемещения с родителем при увеличении

Question

Таким образом, все сообщения, которые я видел, касаются того, как заставить ваш элемент НЕ изменять размеры или перемещать, но проблема, с которой я столкнулся, заключается в том, что мой элемент НЕ будет изменять размеры или перемещаться. Div, называемый headLogo, который содержит логотип в качестве фона, не будет перемещаться / изменяться в размере с родительским 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;

Вот HTML:

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

Answer 1

Я понял. Чтобы разместить логотип, он должен быть в самом контейнере, а затем поместить фактический логотип, чтобы он двигался с увеличением.

Вот HTML-код:

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

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

                </div>
            </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;
}

#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;
}