-1

div 内の特定の場所に画像を配置したいのですが、ウィンドウのサイズを変更すると別の div の後ろに移動します。常に同じ場所にある必要があります。

HTML:

<div id="gallery">

<div id="gallerytext">
<p>This week's<br />heroes</p>
</div>

<div id="kranz">
<img src="images/kranz.png" alt="kranz" width="310px" />
</div>

<div id="pic1">
<img src="frontgallery/1.jpg" alt="gallery image 1" width="20%" />
</div>

<div id="pic2">
<img src="frontgallery/2.jpg" alt="gallery image 2" width="20%" />
</div>

<div id="pic3">
<img src="frontgallery/3.jpg" alt="gallery image 3" width="20%" />
</div>

<div id="pic4">
<img src="frontgallery/4.jpg" alt="gallery image 4" width="20%" />
</div>

<div id="pic5">
<img src="frontgallery/5.jpg" alt="gallery image 5" width="20%" />
</div>

<div id="pic6">
<img src="frontgallery/6.jpg" alt="gallery image 6" width="25%" />
</div>

<div id="pic7">
<img src="frontgallery/7.jpg" alt="gallery image 7" width="20%" />
</div>

<div id="pic8">
<img src="frontgallery/8.jpg" alt="gallery image 8" width="20%" />
</div>

<div id="pic9">
<img src="frontgallery/9.jpg" alt="gallery image 9" width="20%" />
</div>

<div id="entergal">
<a href="index.html">Enter contest</a>
</div>

</div>

CSS:

#kranz img {
    position:absolute;
    left:42%;
    margin-left:-50px;
    margin-top:-13%;
    width:275px;
}

「ギャラリー」の画像は次のように配置されます。

#pic2 img {
    display:block;
    float:left;
    margin-left:10%;
    margin-top:10%;
    -moz-box-shadow: 5px 5px 10x #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
    box-shadow: 5px 5px 10px #000000;
}
4

1 に答える 1

1

正しく理解できているかどうかわかりません....

しかし、割り当ててみてください

position:relative;

絶対位置の画像を含むすべての div に。

要素に position:absolute; がある場合。その位置は、次の相対位置または絶対位置の親から計算されます。

配置された要素が正しく重なっていない場合は、z-index を試してください:

上の要素

z-index:2

「後ろ」要素

z-index:1;

最高指数が上です。

于 2013-01-02T15:27:35.310 に答える