Question

在以下图片库代码中：

使用了以下样式：

.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”将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（相对位置）

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定位为绝对。然后使用position：relative为外部div，内部div应使用position：absolute。现在可以使用CSS的顶部，底部，左侧和右侧属性将内部div元素放置在任何位置。

在此处阅读有关定位元素的更多信息http://www.w3schools.com/Css/css_positioning.asp

另请查看http://www.alistapart.com/articles/css-positioning-101/

（有很多例子）当您需要定位无法在正常流程中定位的内容时，CSS定位尤其有用。

为什么我们需要使用position：relative for css image gallery？

4 个答案: