Зачем нам нужно использовать позицию: относительная для галереи изображений css?

Question

В следующем коде для галереи изображений: были использованы

http://alpatriott.ru/works/album/

следующие стили:

.gallery{ 
    margin:0 auto; 
    width:800px; 
    height:640px; 
    background:#333; 
    box-shadow:0px 0px 15px 1px #333; 
    -webkit-box-shadow:0px 0px 15px 1px #333; 
    -moz-box-shadow:0px 0px 15px 1px #333; 
    position:relative; 
} 
a{ 
float:left; 
width:25%; 
height:25%; 
position:relative; 
border:1px solid #333; 
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
box-sizing:border-box; 
} 
a img{ 
     display:block; 
     width:100%; 
     height:100%; 
     -webkit-transition-property:width, height; 
     -webkit-transition-duration:300ms; 
     -moz-transition-property:width, height; 
     -moz-transition-duration:300ms; 
     -o-transition-property:width, height; 
     -o-transition-duration:300ms; 
     position:absolute; 
     z-index:1; 
     opacity:0.3; 
     cursor:pointer; 
} 

<div class="gallery"> 
    <a tabindex="1"><img src="images/smile.jpg"></a> 
    <a tabindex="1"><img src="images/smile.jpg"></a> 
    </div> 

Я не могу понять, почему они использовали относительное здесь.

Есть другие галереи изображений, которые, кажется, не использовать позиции: по сравнению, например, в следующем коде:

http://www.w3schools.com/css/css_image_gallery.asp

<div class="img"> 
    <a target="_blank" href="klematis_big.htm"> 
     <img src="klematis_small.jpg" alt="Klematis" width="110" height="90"> 
    </a> 
    <div class="desc">Add a description of the image here</div> 
</div> 

div.img 
{ 
    margin:2px; 
    border:1px solid #0000ff; 
    height:auto; 
    width:auto; 
    float:left; 
    text-align:center; 
} 
div.img img 
{ 
    display:inline; 
    margin:3px; 
    border:1px solid #ffffff; 
} 

Согласно определению:

элемент является позиционируется относительно его нормального положения, поэтому «left: 20» добавляет 20 пикселов в положение LEFT элемента. (http://www.w3schools.com/cssref/pr_class_position.asp)

Для моего кода, указанного выше (первый экземпляр), не было никакого относительного расстояния, как и влево: 20px. Я хотел бы знать, почему и когда использовать родственников. и почему мы нуждались в этом примере выше.

Благодаря

Answer 1

Они использовали position: relative; там, потому что они имеют вложенную absolutely расположенного элемента, поэтому если у вас есть элемент positioned absolute вам нужно обернуть элемент с position: relative; контейнером, иначе она будет вытекать в дикой природе. .

поделюсь 2 демки с вами, один с позиционирован относительно контейнера и других без позиции по отношению контейнера

Demo 1 (Позиция относительная емкость)

Demo 2 (без установки Относительная емкость)

Примечание: Элементы, которые используют position: relative; не означает, что он всегда будет держать absolute расположены элементы, оно не может содержать абсолютные элементы, потому что, если дизайнер хочет использовать top и left свойства, ему необходимо использовать position: relative;, так как top и left не будут работать на позиции static.

Demo 3 (Relative Position)

Demo 4 (Статическое положение)

Кроме того, эта логика не применяется ТОЛЬКО CSS Gallery, это позиционирование концепции в CSS. Вы можете прочитать несколько подробных руководств по CSS Позиционирование

Answer 2

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

может играть Arround с кодом (почему позиция: абсолютная 5px сверху и слева только 5px из апельсина ...) он может помогает понять

http://jsfiddle.net/ZKP6q/

<div class="app-header">xxx 
    <div class="main-app-area"> <!-- app contains four pages --> 
     yyy 
     <div class="app-page active">zzz</div> 
     <div class="app-page"></div> 
     <div class="app-page"></div> 
     <div class="app-page"></div> 
     <div class="app-page"></div> 
    </div> 
</div> 

<style type="text/css"> 
.app-header 
{ 
    background-color:green; 
    position: fixed; 
    top: 10px; 
    left: 10px; 
    width: 100%; 

} 
.main-app-area 
{ 
    background-color:orange; 
    width: 100%; 
    height: 100%; 
    position:relative; 
    top:20px; 
    left:20px; 
} 

.app-page 
{ 
    background-color:fuchsia; 
    opacity:0.5; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 5px; 
    left: 5px; 
    visibility: hidden; 

} 
.app-page.active { 
    visibility:visible; 
} 
</style> 

Answer 3

«Должность: относительная «в элементе контейнера не только создаются другие позиции внутри элемента относительно контейнера; он также запускает новый контекст стекирования для z-index. Новый контекст стекирования означает, что элементы img будут отображаться над всем, что было до них, даже если они имели более высокий z-index. Это можно объяснить с помощью графики в http://css-tricks.com/almanac/properties/z/z-index/

Answer 4

Для этого может быть много причин, но лично мне это нравилось, когда мне приходилось кое-что пересекать.

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

Например, если у меня есть два div и снаружи div, это статический блок, а элементы внутри внешнего div будут расположены по абсолютной относительности относительно внешнего div. Затем используйте положение: относительное для внешнего div и внутреннего div должно использовать положение: абсолютное. Теперь внутренние элементы div могут быть размещены в любом месте, используя атрибуты верхнего, нижнего, левого и правого CSS.

Подробнее о позиционирующих элементах здесь http://www.w3schools.com/Css/css_positioning.asp

Также обратите внимание на http://www.alistapart.com/articles/css-positioning-101/

(там вы много примеров) позиционировании CSS может быть особенно полезно, когда вам нужно поместить что-то, что не может быть расположены в нормальном потоке.