1

私のウェブサイトhttp://www.tonypalazzo.comの特定の部分にぶら下がっているリボンの次のCSSがあります。 

.ribbon {
    float:left;
    padding:5px 0 0 0;
    margin:0;
    width:217px;
    position:absolute;
    left: 965px;
    top: 67px;
    z-index: 999999;
}

さまざまなサイズのモニターで表示した場合、またはChromeでズームインおよびズームアウトした場合でも（Dreamweaverのデザインビューでは完全にランダムなスポット）、さまざまな水平位置に表示されます。それは適切な垂直（上）の位置を維持しますが、常に左から965px離れたままにしたいように見えます。これにより、異なる解像度で表示すると、まったく異なる場所に表示されます。

「相対」位置では、オーバーレイする必要がある他のdivボックスはオーバーレイされません。ソーシャルメディアアイコンが置かれている場所と同じ左/上値を維持しながら、このdivを他のdivの前景（オーバーレイ）に配置する方法についてのヘルプはありますか（Webサイトを参照）。

私はこれについて他の投稿を読んで、それを私の「親」divに入れるように言っています。私の「block_header」が親である場合、それはその中にあると思います。これがhtmlの簡単な要約です（コードが表示されていることを確認するために、そこに置いた。は無視してください：

<div class="main">
    <div class="header">
        <div class="block_header">
            <div class="logo"></div>
            <div class="social"></div>
            <div class="ribbon">
                <a href="portfolio.html"><img src="images/portf.png" onmouseover="this.src='images/portf1.png'" onmouseout="this.src='images/portf.png'"/></a>
            </div>
        </div>
    </div>
</div>

ありがとうございました！

4

1 に答える 1

1

リボンは、想定どおり、画面の左端から965ピクセルを維持しています。親を基準にして配置する場合は、スタイルposition: relativeを親に追加します。この場合、それをに追加してから.block_header、リボンの位置を変更する必要があります。

于 2012-11-10T01:57:27.650 に答える