爲什麼我們需要使用position：relative for css image gallery？

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

根據定義：

的元素是相對於其正常位置定位，所以「左：20」將20個像素添加到元素的左側位置。 （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（相對位置）

Demo 4（靜態位置）

而且，這種邏輯並不適用只CSS畫廊，它在CSS定位 概念。你可以閱讀一些關於CSS的詳細教程 定位

Answer 2

一個子元素總是絕對或相對於他的父母。因此，製作子元素和父元素非常重要，除非您希望div以佔位符的方式以另一種方式加載數據...

可起到角落找尋與代碼（爲什麼是位置：絕對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啓動一個新的堆疊環境。新的堆疊上下文意味着即使它們有更高的z-index，元素也會出現在它們之前的任何東西之上。你可以找到這解釋與圖形在http://css-tricks.com/almanac/properties/z/z-index/

Answer 4

那麼可能有很多原因，但我個人喜歡它，當我不得不重疊的東西。

它主要用於元素，當我知道該元素的內部元素將被絕對定位。

例如，如果我有兩個div，外部div是一個靜態塊，外部div內的元素將相對於外部div絕對定位。然後使用位置：相對於外部div和內部div應該使用position：absolute。現在，內部div元素可以放置在使用CSS的頂部，底部，左側和右側屬性的任何地方。

此處詳細瞭解http://www.w3schools.com/Css/css_positioning.asp

定位元素也看http://www.alistapart.com/articles/css-positioning-101/

（這兒有很多例子），CSS定位可以是特別有用的，當你需要放置的東西，不能定位正常流程中。