0

基本的に、私は2つのdivにネストされたdivに画像を持っています。写真の隅にテープを重ねたかったのです。

そこで、そのテープイメージのdivを作成し、ドキュメントの下部に配置して、相対的な位置を指定し、これらの属性を指定しました。

#tape
{
    width: 100px;
    height: 65px;
    position:relative;
    left: 25px;
    top: -662px;
}

そして、ここに写真の属性があります：

#character-spotlight 

    {
        margin-left:50px;
        width:250px;
        height:250px;
        float:left;
        z-index:1;
    }

これらのDivのボットはにネストされています

#content 
{
    width:800px;
    height:1360px;
    background-image:url(Cork.Board.png);
    background-size:100%;
    float:left;
    display:block;
}

それ自体がネストされています

#container 
{
    width: 1024px;
    height:1600px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 50px;
    display:block;
}

これがウェブページです

www.workaholicsfans.com/characters-files/Adam-Demamp.html

Chromeでは正常に動作しますが、IEとFirefoxでは動作しません。どんな助けでも大歓迎です

4

2 に答える 2

1

（あなたの投稿にはリンクがありません）あなたが説明し、cssを提供した状況がうまくいくとは信じられません。Chromeで動作しているという事実は、私が推測する純粋な運です。あなたはそれを適合させるために数字で遊んでいたのではないでしょうか。

解決策は実際にはかなり単純です。

<div class='picture-wrapper'>
 <img class='picture' src='picture.../>
 <img class='tape' src='tape... />
</div>

その後、CSSで

.picture-wrapper {
 position: relative;  /* this now acts as the reference for  position absolute of the children */
}
.tape {
 display: block;
 position: absolute;  /* position according to its parent */
 top: 0;  /* top position */
 left: 0; /* left position */
 z-index: 5; /* bring to front */
}

それでうまくいくはずです。

編集： 私はあなたがリンクを追加したのを見ました。テープを画像の端からはみ出させたい場合は、ラッパーにパディングトップとパディングレフトを追加するのが簡単な方法です。このようなもの：

padding: 8px 0 0 8px;
于 2012-08-06T22:54:01.237 に答える
0

または、ページコンテナに従って絶対位置に配置する場合は、次のようにします。

#tape {
    height: 65px;
    left: 325px;
    position: absolute;
    top: 300px;
    width: 100px;
}

（しかし、PeterVRのコードの方が好きだということを認めなければなりません。これにより、物事が相対的に保たれるため、「新しい」ものを#tape divの上に配置すると便利です）。

于 2012-08-06T22:59:05.360 に答える