Как сохранить изображения на месте при изменении размера браузера?

Question

Привет, на моей странице у меня есть 2 символьных изображения, которые я разместил на обеих сторонах текста и баннера, это изображение его http://i.imgur.com/KwzphQP.jpg, но проблема в том, что когда я просматриваю свой браузер, изображения следует за браузером, они делают не остаются в том же положении, и я не хочу, чтобы это произошло потому, что у меня есть фиксированный макет, Херес код CSS, я не знаю, как разместить его хорошо, но в любом случае

.support-text { 
    width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
    line-height: -2px; 
    margin-bottom: 130px; 

} 

.support-text h1 { 
    font-size: 30px; 
} 

.support-text { 
    clear: left; 
} 

.support-text { 
    font-size: 23px; 
} 

.support-img { 
    margin-top: -80px; 
    margin-bottom: 80px; 
    z-index: 1; 
} 

.ct-pic { 
    position: absolute; 
    right: 10px; 
    bottom: 30px; 
    float: right; 
} 

.ct-pic:hover { 
    -webkit-filter: brightness(180%); 
} 

.t-pic:hover { 
    -webkit-filter: brightness(180%); 
} 

.t-pic { 
    position: absolute; 
    left: 40px; 
    bottom: 30px; 
    float: left; 
} 

Херес HTML

<section class="support-text"> 
      <div class="ct-pic"> </div> 
    <div class="t-pic" width="867" height="569"></div> 
     <img src="img/support-us.png" class="support-img"> 
     <p>Hello, if this site has helped you improve your gameplay, and learn useful stuff, feel free to support us, so we can keep this website up, so more people can learn. You can support through Steam or throught paypal. Keep in mind that you do not have to support, but if you do, we appreciate it alot. and we can continue to upload new content (Smokes, flashes, tactics) to the website. </p> 

    </section> 

Answer 1

heres пример того, как расположить вещи рядом друг с другом без их перемещения или изменения положения ns при изменении размера окна (div могут быть тегами img или тем, что вы хотите, чтобы они были). Просто поместите их в «контейнер» с фиксированной шириной, а затем всплывают их внутри этого контейнера

<div id='container'> 
    <div id='image-1' class='image'></div> 
    <div id='image-2' class='image'></div> 
    <div id='image-3' class='image'></div> 
</div> 

#container { 
    width: 200px; 
    height: 100px; 
    background: black; 
} 
.image { 
    background: white; 
    width: 20px; 
    height: 20px; 
    float: left; 
    margin: 20px; 
} 

http://jsfiddle.net/7qytj718/1/

обновление

у вас есть проблемы с CSS. Вы устанавливаете позиции дочерних элементов в абсолютные, это заставляет их игнорировать их родительский элемент и стать позиционированным относительно всего окна. Когда это происходит, дочерние элементы начинают перемещаться при изменении размера окна.