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 のような相対距離はありませんでした。相対を使用する理由とタイミングを知りたいです。そして、なぜこの例で上記のものが必要なのか.

ありがとう

4

4 に答える 4

0

子要素は常に、その親に対して絶対または相対に配置されます。そのため、別の方法でデータをロードするプレースホルダーとして div が必要な場合を除いて、子要素と親要素を作成することが重要です...

コードをいじるかもしれません（なぜposition:absolute 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 に答える