Изображения перемещаются из положения при изменении размера браузера?

Question

Веб-сайт, который я пытаюсь создать, имеет несколько проблем с позиционированием изображения. В настоящее время я использую jQuery под названием MobilyNotes, чтобы иметь анимированные изображения на моей индексной странице, но когда я изменяю размер моего браузера, изображение, расположенное слева, при просмотре в полноэкранном режиме браузер перемещается вправо, когда он изменяется. Вот мой HTML код:

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

    } 

Пожалуйста, помогите мне с кодировкой, большое спасибо заранее.

Answer 1

Я думаю, что ваша проблема - это абсолютное позиционирование вашего использования на заметке. По умолчанию абсолютное позиционирование принимает этот div из нормального потока страницы. Попытайтесь перейти на относительную и повторную позицию и посмотреть, работает ли это.