1

在图片库的以下代码中：

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 这样的相对距离。我想知道为什么以及何时使用 relative。以及为什么我们在上面的这个例子中需要一个。

谢谢

4

4 回答 4

5

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

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

Demo 1（位置相对容器）

Demo 2（无 Position Relative 容器）

注意：使用的元素position: relative;并不意味着它总是持有absolute定位元素，它可能不包含绝对元素，因为如果设计者要使用top和left属性，他需要在position: relative;那里使用top并且left不会在static位置上工作。

Demo 3（相对位置）

演示4（静态位置）

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

于 2013-07-25T06:32:12.200 回答
0

子元素始终相对于其父元素绝对定位或相对定位。所以制作子元素和父元素很重要，除非您希望 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>
于 2013-07-25T06:33:07.263 回答
0

容器元素中的“位置：相对”不仅使元素内的其他位置相对于容器；它还为z-index. 新的堆叠上下文意味着img元素将出现在它们之前的任何东西之上，即使它们有更高的z-index. 您可以在http://css-tricks.com/almanac/properties/z/z-index/中找到用图形解释的内容

于 2013-07-25T06:33:08.560 回答
0

好吧，可能有很多原因，但是当我不得不重叠某些东西时，我个人喜欢它。

当我知道该元素的内部元素将被绝对定位时，它主要用于该元素。

例如，如果我有两个 div 并且外部 div 是一个静态块，并且外部 div 内的元素将相对于外部 div 绝对定位。然后对外部 div 使用 position:relative，内部 div 应该使用 position:absolute。现在可以使用 CSS 的 top、bottom、left 和 right 属性将内部 div 元素放置在任何地方。

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

另请参阅http://www.alistapart.com/articles/css-positioning-101/

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

于 2013-07-25T06:37:47.233 回答