html - Images move out of position when I resize the browser? -

There are some problems with the position of the image in the website I am trying to create. I'm currently called a jQuery I am using mobilinotes, which has an animated image on my index page, but when I change my browser size, the image that is on the left side when full screen mode is seen in the browser, then take it to the right size Goes when its size is bad Is. Here is my HTML code:

  & lt; Div class = "wrap" & gt; & Lt; Div class = "notes_img" & gt; & Lt; Div class = "note" & gt; & Lt; Img src = "image / img1.jpg" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "note" & gt; & Lt; Img src = "image / img2.jpg" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "note" & gt; & Lt; Img src = "image / img3.jpg" alt = "" /> & Lt; / Div & gt; & Lt; Div class = "note" & gt; & Lt; Img src = "picture / img4.jpg" alt = "" / & gt; & Lt; / Div & gt; & Lt; Div class = "note" & gt; & Lt; Img src = "image / img5.jpg" alt = "" / & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 and CSS:  
  body {margin: 0; Padding: 0; Text align: center; Color: # 333333; Background color: #ffffff; Background: URL (../images/pat.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; Align text: left; Margin: 0 auto 0; } # Img_1 .logo {Height: 20px; Padding-top: 155px; Swim left; } # Img_1 .logo_us {float: right; Status: Relative; Correct: 5px; } # Img_1 .logo1 {margins: 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 {status: relative; Correct: 20px; } # Content {width: 220px; Margin: 200 pixels auto 0; }. Wrap {Float: Correct; Clean both; Width: 250px; Margin-top: -270px; Margin-right: 500px; } .notes_img {status: relative; float right; Clean both; Width: 200px; Height: 200px; }. Note {Status: 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; } An IMG (range: none); #Minaria {background: # 000000; height: 332px; border color: # 996; border: middle;} #imgs {width: 655px; text align: left; margin: 0 Auto 0;} #mainArea .sitename {float: left; margin-top: 146px; margin-left: -100px;} # case area Lang {float: right; margin-top: 140px;} # content {width: 220px ; Margin: 200 pixels auto 0;} Wrap {float: true; clean both; width: 250px; margin-top: -270px; margin-right: 500px;} .notes_img {status: relative; right Wave; Clean 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;} an IMG (border: none;) # Minieria {background: # 000000; height: 332px; border color: # 996; border: middle;} #imgs {width: 655px; text align: left; margin: 0 auto 0;} #mainArea .sitename {float: Left; Margin-top: 146px; Margin-left: -100px; } # Case area Lang {float: right; Margin-top: 140px; }   
 Please help me with coding, thanks in advance.   
 
 
 I think your problem is the full position to use on your note. By default, the full position takes the div out of the normal flow of the page. Try to change the relative and re-position and see whether it works or not.