Позиционирование CSS относительно div

Question

У меня есть два изображения внутри div. Я бы хотел разместить эти изображения, используя процент относительно родительского div.

Вот скрипку, чтобы понять: http://jsfiddle.net/b9ce626s/

Я попытался установить position: absolute; на изображении, но он использует ширину окна.

Мне нужно, чтобы изображение справа было размещено на 95% красного div, а не на окне. Я также не хочу, чтобы левое изображение влияло на позиционирование правой.

Answer 1

Добавить position: relative на #main, так что положение изображений основано на этом элементе (а не на корневом элементе). Пример: http://jsfiddle.net/b9ce626s/1/

страница элемент с относительным позиционированием дает управление абсолютно положение дочерних элементов внутри него.

https://css-tricks.com/absolute-positioning-inside-relative-positioning/

В качестве примечания, если присвоить ширину с процентным значением к изображениям, он теперь будет на основе ширины родительского элемента.

Answer 2

Дайте главный position: relative; так:

#main { 
    display: block; 
    width: 50%; 
    height: 50%; 
    background-color: red; 
    position:relative; 
} 

Это ключевое слово выкладывает все элементы, как если бы элемент не был расположен, а затем отрегулировать положение элемента, не меняя раскладку (и, таким образом, оставляя зазор для элемент, в котором он был бы, если бы он не был расположен). Эффект позиции: относительный по таблице - * - группа, таблица-строка, столбец таблицы, таблицы-ячейки и элементы заголовка таблицы не определены.

JSFiddle Demo

Answer 3

Попробуйте это ..

Html

<div id="main"> 
    <img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" /> 
    <img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" /> 
</div> 

Css

body, html { 
      width: 100%; 
      height: 100%; 
      margin: 0; 
     } 
     #main { 
      display: block; 
      width: 50%; 
      height: 50%; 
      background-color: red; 
      position:relative; 
     } 
     img { 
      position: absolute; 
      width: 5%; 
     } 
     #card1 { 
      left:5%; 
     } 
     #card2 { 
      right: 5%; 
     } 

Fiddle Sample

Answer 4

#main { 
      display: block; 
      width: 50%; 
      height: 50%; 
      background-color: red; 
      position: relative; 
     }