0

<img>2 つのタグの間には改行があり、適切な書式設定のためにドキュメント内でインデントされています。

しかし、相対位置と z オーダーを使用して、ある画像 (レイアウトの一部) を別の画像の上に配置しています。

私はこのようなものを持っています

<img style="position: relative; z-index: -1;" width=a height=b>
<img style="position: relative; z-index: 0; left: -a" width=x height=y>

最初のタグの後の改行<img>はスペースを追加し、2 番目の<img>タグの相対的な左位置を設定すると、そのスペースが考慮され、最初の画像の少し右側に設定されます。

それらを同じ行に配置したくありません。下の画像タグを背景にすることはオプションではありません（サイズを変更する必要があります）。相対位置をいじることは問題外です（スペースを想定しています）ブラウザー/システムによってサイズが異なります)。

これを機能させることはできますか？

編集 -- 詳細

間隔が相対的な配置からずれています。それらを絶対に配置する方法はありませんが、静的な配置を持つ別の要素のleftおよびに配置する方法はありますか?top

とにかく、現在の状態のレイアウトには、別の画像に重なる画像があります。重なっている画像は div の背景で、レイアウトの一部は div 内の画像です。

リンクがクリックされたときに、重なっている画像を変更する必要があります (画像のサムネイルをクリックすると、重なった画像に大きなバージョンが表示されます)。ただし、画像はすべて異なるサイズであり、デフォルトの div 背景画像よりも大きくなっています。div の背景のサイズを変更できないため、画像にする必要があります。しかし、問題は、ある画像を別の画像に重ねることです。彼らは私が画像間でもフェードすることを望んでいるので、2 つの画像を重ねて (上部の画像が下部の画像にフェード インおよびフェード アウトする)、さらにレイアウトの端をそれらの上に重ねる必要があります。

他の方法でこれを達成する方法がわかりません

4

4 に答える 4

3

その z オーダーは何ですか? その z インデックス。そして、デザイン内の改行はどのように何かを改善しますか. 私が見ているように、ウェブサイトのレイアウト/デザインの z-index と改行は、最後に使用する必要があります。必要なのは、適切なマージンとパディングです。z-index の使用を開始する前に、負のマージンについてもお読みください。

これらをチェックしてください: http://www.barelyfitz.com/screencast/html-training/css/positioning/ http://www.elated.com/articles/css-positioning/ http://www.smashingmagazine.com/ 2009/07/27/the-definitive-guide-to-using-negative-margins/ http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

于 2009-08-10T20:19:41.160 に答える
0

これは私のために働いたものです：

div一番上の画像（レイアウトの一部、一部の画像に忍び寄るエッジのようなもの）を通常のようにレイアウトに配置しました（ページの中央にある静的なサイズの に左揃え）。

次に、残りの 2 つを 0,0 に絶対配置しました (ただし、場所は関係ありません)。

<center>
    <div style="width: 686">
        <img id="ed" src="./edge.jpg">
        <img id="bg" style="position: absolute; left: 0; top: 0; z-index: -2;">
        <img id="fg" style="position: absolute; left: 0; top: 0; z-index: -1;">
    </div>
</center>

次に、JavaScript を少し使用して、他の 2 つの画像の位置を修正しました。

function fixImages() {
    var imageEdge = document.getElementById('ed');
    var foregroundImage = document.getElementById('fg');
    var backgroundImage = document.getElementById('bg');

    foregroundImage.style.left = imageEdge.style.left;
    foregroundImage.style.top = imageEdge.style.top;

    backgroundImage.style.left = imageEdge.style.left;
    backgroundImage.style.top = imageEdge.style.top;
}

最善の方法ではないかもしれませんが、うまくいきますし、このプロジェクトを終わらせるよう圧力をかけられているので、今のところそうしなければなりません。

于 2009-08-10T20:57:03.863 に答える
-1

タグのスタイリングに適用display: block;します。img

于 2009-08-10T20:12:24.327 に答える