Div 겹침이 올바르지 않음

Question

div이 나머지 페이지와 겹치게 만드는 데 문제가 있습니다.

하나의 이미지가 하나의 섹션을 오버랩 할 필요가 있습니다. 나는 일을 좀해야만하지만 일단 창 크기를 조정하거나 다른 해상도로 보게되면 이미지가 어디에 나타나야하는지 알 수 있습니다.

나는 position:absolute;과 z- 색인을 사용하고 있습니다. 그것은 어느 정도까지 작동합니다. 하지만 브라우저 윈도우의 크기를 조정하면 (예를 들어, 내가 머무르고 싶은 곳에서부터 움직이는 것처럼), 그 위치에 머 무르지 않을 것입니다.

여기에 나는 그것이 yellow box like this을 중복 할 필요가 this website

입니다.

편집 : 빠른 추후 조치 : 귀하의 솔루션이 나에게 약간의 괴롭힘을 초래했다고 생각합니다. 난 그냥 이미지 전에

<div id="box"><img src="images/boxheading.png"></div> 

내부에 직접 as can be seen here

Answer 1

이동

<div id="medal"><img src="images/star2012medal.png" width="220" height="277"></div> 

에서 다른 div를 배치 드릴 수 없습니다.

는하여 boxheading.png 이미지에 다음 CSS에

#medal { 
    position: relative; 
    top: -240px; 
    right: -80px; 
    z-index: 50; 
} 

을 변경하고 적용

{ 
    position: relative; 
    top: -280px; 
} 

편집 : 나는 당신이 달성하려고하는 어떤 느낌에서

, 당신 2 열 레이아웃을 조사해야합니다. 수행 방법을 배우기 위해 온라인으로 너무 많은 우수 사례 리소스가 있습니다.

가 첫 번째 아래에 또 다른 상자를 추가하려면 html에 다음과 같은 변경 사항을 수행해야합니다

이

<div id="box-container"> 
    <div id="box"> 
     <div id="medal"> 
      <img src="images/star2012medal.png" width="220" height="277"> 
     </div> 
     <img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; "> 
    </div> 
    <div id="box2">testing</div> 
</div> 

다음 css 다음을 추가합니다에만 크롬에서 테스트

#box-container { 
    float: right; 
} 

#box { 
    float: left; 
    color: #333; 
    background: #fff; 
    height: 240px; 
    width: 291px; 
    display: inline; 
    border-style: solid; 
    border-color: #fff100; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    clear: both; 
} 

#box2 { 
    float: left; 
    color: #333; 
    background: #fff; 
    height: 240px; 
    width: 291px; 
    display: inline-block; 
    border-style: solid; 
    border-color: #fff100; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    clear: both; 
    margin-top: 10px; 
} 

. 다른 브라우저에서 테스트 해보십시오!