私は、HTMLタグの間にスペースが相対的な位置決めを台無しにないことはできますか？

StackOverflow https://stackoverflow.com/questions/1256944

質問

の2つのがあり<img>タグの間に改行があり、それらは素敵なフォーマッティングのための文書にインデントされます。

しかし、私は別のオーバートップつの画像（レイアウトの一部）を配置する相対位置及び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>タグの相対的な左の位置を設定すると、そのスペースを考慮すると、それは最初の画像の右側に少しを設定していますます。

私は「I（問題外である背景にはオプション（それはサイズにする必要があります）ではありません下の画像タグを作成し、相対的な位置をいじる、同じライン上に置く必要はありませんM仮定スペース）が異なるブラウザ/システム上で異なるサイズになります。

私はこの作業を行うことができますか？

編集 - 詳細情報

の間隔は、相対的な位置決めをオフに投げています。ただ絶対にそれらを配置する方法はありませんが、静的な配置が設定されている他の要素のleftとtop、へ？

とにかく、その現在の状態のレイアウトは別の画像を重ねた画像を有しています。重複画像は、DIVの背景であり、レイアウトの部分は、DIVの画像である。

のリンクがクリックされたときに、私は重複画像を変更する必要がある（画像のサムネイルをクリックすると、拡大版を重ねた画像に現れます）。しかし、画像はすべてデフォルトのdivの背景画像よりも大きく異なるサイズ、です。それはイメージである必要がありますので、私はdivの背景のサイズを変更することはできません。しかし、問題は別と重なるように一つの画像を取得しています。彼らは私にも画像間のフェードにしたいので、私は、プラスそれらの上にレイアウトのエッジ（下の1にし、フェードアウトトップ1との）互いの上に積み重ねられた2枚の画像を、必要があります。

私はこれを実現する方法がわからない、他の方法

役に立ちましたか？

解決

がzオーダーということは何ですか？そのZインデックス。 そして、どのように何を改善し、設計内の休憩を行う。 私は物事を見るように、ウェブサイトのレイアウト/デザインのzインデックスと改行はあなたが使用する必要があり、最後のものです。何が必要、適切なマージンやパディングです。あなたはZインデックスの使用を開始する前に、また負のマージンについて読みます。

これらをチェックアウト： http://www.barelyfitz.com/screencast/html-training/css /ポジショニング/ に http://www.elated.com/articles/css-positioning/する のhttp：//www.smashingmagazine .COM / 2009/07/27 /-決定的なガイド・ツー・使用して、負のマージン/ に のhttp：//www.smashingmagazine .COM / 2007/05/01 / CSS-フロート理論-もの - あなた-べきで知る/ の

他のヒント

これは私のために働いてしまったものです。

私は先頭画像（レイアウトの一部、一部の画像の上にオーバークリープソートの縁）の中央にある、左静的サイズdivに並んだ（通常のようにレイアウト内に配置しますページ）。

は、その後、私はちょうど0,0（ここで、それは問題ではありません）で、絶対的に配置され、他の2を作っています。

<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;
}

それかもしれないのないのそれは今のために行う必要がありますので、それを行うための最善の方法であるが、それが動作し、このプロジェクトが終了されるために、私はプレッシャーをされています。

カーソン、

<center>タグは推奨されません。（私の知る限り）。 686px、あなたは余裕使用することができます：私はあなたが幅にdiv要素を設定したので、あればと考えています。0オート

私は多分、この<のhref = "http://net.tutsplus.com/tutorials/javascript-ajax/building-an-auto-scrolling-slideshow-that-、あなたがしようとしている効果であると考えている何のため作品-で-と-なし-ジャバスクリプト/」のrel = "nofollowをnoreferrer"> jQueryのスライドショーチュートリアルには役立ちます。

これは、水平に順不同リストを使用して、自動的にそれらを介してのみ、一度に見えるリスト、およびスクロールします。あなたはそのようなslideshow.jsの「フェード」にスライディング機能を変更することができます：

 $slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
        tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'scrollLeft',   // the slide effect to us

E

FXに 'scrollLeft'：

上記のFXを変更する 'フェード' それはこのようになりますので：

$slideshow = {
        context: false,
        tabs: false,
        timeout: 5000,      // time before next slide appears (in ms)
        slideSpeed: 500,   // time it takes to slide in each slide (in ms)
        tabSpeed: 500,      // time it takes to slide in each slide (in ms) when clicking through tabs
        fx: 'fade',   // CHANGED TO 'FADE'

また、これを構築した後、リスト項目としてあなたのイメージを使用すると、関連する画像のサムネイルにチュートリアルの改ページのテキストを置き換えます。

あなたはアウトスピード＆タイムでいじくり回すことができます＆それはまた、JavaScriptを有効ずにうまく動作します。

これは、あなたが、あなたが望む効果を達成するのを助けるしない場合は、

また、あなたはスケッチをすることができますか？ 「重複」の使用は少し混乱しています。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top