브라우저의 크기를 조정할 때 이미지의 위치가 벗어 납니까?

Question

내가 만들려고하는 웹 사이트는 이미지의 위치와 관련된 몇 가지 문제가 있습니다. 현재 MobilyNotes라는 jQuery를 사용하여 내 인덱스 페이지에 애니메이션 이미지가 있지만 브라우저 크기를 조정하면 전체 화면 모드 브라우저에서 볼 때 왼쪽에있는 이미지가 크기가 조정될 때 오른쪽으로 이동합니다.

<div class="wrap"> 
<div class="notes_img"> 
       <div class="note"> 
        <img src="images/img1.jpg" alt="" /> 
       </div> 
       <div class="note"> 
        <img src="images/img2.jpg" alt="" /> 
       </div> 
       <div class="note"> 
        <img src="images/img3.jpg" alt="" /> 
       </div> 
       <div class="note"> 
        <img src="images/img4.jpg" alt="" /> 
       </div> 
       <div class="note"> 
        <img src="images/img5.jpg" alt="" /> 
       </div> 
       </div> 

및 CSS :

body { 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    color: #333333; 
    background-color: #ffffff; 
    background:url(../images/pattern.png); 
    background-repeat:repeat; 

    } 


#img_1 { 
    background: #ffffff url('img_sl/bg_top.jpg') repeat-x; 
    height: 102px; 
    background-color:transparent; 
    } 

#img_1 .logo_upr { 
    width: 659px; 
    text-align: left; 
    margin: 0 auto 0; 
    } 

#img_1 .logo { 
    height: 20px; 
    padding-top: 155px; 
    float: left; 
    } 

#img_1 .logo_us { 
    float: right; 
    position: relative; right: 5px; 
    } 

#img_1 .logo1 { 
    margin: 0 15px 6px 0; 
    } 


#img_2 { 
    background: #ffffff url('img_sl/bg_btm.jpg') repeat-x; 
    height: 210px; 
    background-color:transparent; 
    } 
#img_2 .logo_jp { 
    width: 655px; 
    text-align: right; 
    margin: 0 auto 0; 

    } 

#img_2 .logo_jp IMG { 
    position: relative; right: 20px; 

    } 

#content { 
width:220px; 
margin:200px auto 0; 
} 

.wrap { 
float:right; 
clear:both; 
width:250px; 
margin-top: -270px; 
margin-right: 500px; 

} 

.notes_img { 
position:relative; 
float:right; 
clear:both; 
width:200px; 
height:200px; 
} 

.note { 
    position: absolute; 
    top: 1px; 
    left: 2px; 
    padding: 10px; 
    background: #000; 
    border: 1px solid #333; 
    width: 200px; 
} 


ul.listNotes, 
ul.listNotes li { 
display:block; 
list-style:none; 
padding:0; 
margin:0; 
} 

a { 
color:#fff; 
} 

a img { 
border:none; 
} 


#mainArea { 
    background: #000000; 
    height: 332px; 
    border-color:#996; 
    border:medium; 
    } 

#imgs { 
    width: 655px; 
    text-align: left; 
    margin: 0 auto 0; 
    } 

#mainArea .sitename { 
    float: left; 
    margin-top: 146px; 
    margin-left: -100px; 
    } 

#mainArea .lang { 
    float: right; 
    margin-top: 140px; 

    } 

#content { 
width:220px; 
margin:200px auto 0; 
} 

.wrap { 
float:right; 
clear:both; 
width:250px; 
margin-top: -270px; 
margin-right: 500px; 

} 

.notes_img { 
position:relative; 
float:right; 
clear:both; 
width:200px; 
height:200px; 
} 

.note { 
position:absolute; 
top:0; 
left:0; 
padding:10px; 
background:#000; 
border:1px solid #333; 
width:200px; 
} 


ul.listNotes, 
ul.listNotes li { 
display:block; 
list-style:none; 
padding:0; 
margin:0; 
} 

a { 
color:#fff; 
} 

a img { 
border:none; 
} 


#mainArea { 
    background: #000000; 
    height: 332px; 
    border-color:#996; 
    border:medium; 
    } 

#imgs { 
    width: 655px; 
    text-align: left; 
    margin: 0 auto 0; 
    } 

#mainArea .sitename { 
    float: left; 
    margin-top: 146px; 
    margin-left: -100px; 
    } 

#mainArea .lang { 
    float: right; 
    margin-top: 140px; 

    } 

가 코딩을 도와주세요, 사전에 대단히 감사 여기 내 HTML 코드입니다.

Answer 1

나는 귀하의 문제가 절대적인 위치에 있다고 생각합니다. 기본적으로 절대 위치 지정은 페이지의 정상적인 흐름에서 div를 가져옵니다. 상대방으로 변경하고 다시 위치를 잡아보고 작동하는지 확인하십시오.