为什么我们需要对CSS图片库使用position:relative？

在以下图像库代码中：

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>

我无法弄清楚他们为什么在这里使用相对。

还有其他图像库似乎不使用position:relative，例如在以下代码中：

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”会向元素的 LEFT 位置添加 20 个像素。 (http://www.w3schools.com/cssref/pr_class_position.asp)

对于我上面的代码（第一个实例），没有提到像 left:20px 这样的相对距离。我想知道为什么以及何时使用相对。以及为什么我们在这个例子中需要上面的一个。

Thanks

他们用过position: relative;那里因为他们有一个嵌套absolutely定位元素，所以当你有一个元素时positioned absolute你需要用一个包裹元素position: relative;容器，否则会流到野外。

我将与您分享 2 个演示，一个带有定位相对容器，另一个没有位置相对容器

Demo 1（位置相对容器）

Demo 2（没有相对位置容器）

注意：使用的元素position: relative;并不意味着它会永远存在absolute定位元素，它可能不包含绝对元素，因为如果设计者想要使用top and left属性，他需要使用position: relative;有作为top and left不起作用static位置。

Demo 3（相对位置）

Demo 4（静态位置）

另外，这个逻辑不仅仅适用于CSS Gallery，它是一个定位 CSS 中的概念。你可以阅读一些关于CSS的详细教程 定位