Kann ich Räume zwischen HTML-Tags nicht relative Positionierung vermasseln?

Question

Es gibt einen Zeilenumbruch zwischen zwei <img> Tags, und sie sind in dem Dokument für nice-Formatierung eingerückt.

Aber ich bin mit relativer Positionierung und z-Reihenfolge ein Bild zu platzieren (Teil des Layouts) overtop ein andere.

Ich habe so etwas wie diese

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

der Zeilenumbruch nach dem ersten <img> Tag fügt ein Leerzeichen ein, und dann, wenn ich die relative linke Position des zweiten <img> Tages gesetzt wird, dass der Raum in Betracht gezogen und es ist nur ein wenig nach rechts dem ersten Bild eingestellt .

Ich will sie nicht auf der gleichen Linie setzen, so dass das untere Bild-Tag ein Hintergrund keine Option ist (es hat so bemessen werden), und mit der relativen Position Hantieren indiskutabel ist (I‘ m unter der Annahme, Räume werden verschiedene Größen auf verschiedenen Browsern / Systeme sein).

Kann ich diese Arbeit?

Bearbeiten - weitere Informationen

Der Abstand wirft die relative Positionierung aus. Gibt es keine Möglichkeit, nur sie absolut zu positionieren, sondern auf die left und top eines anderen Elements, die statische Positionierung hat?

Wie auch immer, ist das Layout in seinem aktuellen Zustand ein Bild überlappend um ein anderes Bild. Die überlappte Bild ist ein div Hintergrund und das Stück Layout ist ein Bild im div.

Ich brauche das überlappende Bild zu ändern, wenn ein Link angeklickt wird (ein Miniaturbild eines Bildes geklickt wird, und eine größere Version erscheint in dem überlappten Bild). Aber die Bilder sind alle verschieden Größen, die größer als das Standard-div Hintergrundbild. Ich kann keine div Hintergrund Größe ändern, so dass es ein Bild hat sein. Aber das Problem wird immer ein Bild ein anderes zu überlappen. Sie wollen ich auch zwischen den Bildern zu verblassen, so brauche ich zwei Bilder, gestapelt auf dem jeweils anderen (mit der Spitze eines Ein- und Ausblenden zu einem Boden ein) sowie der Rand des Layouts über Oberseite von denen.

Ich weiß nicht, wie dies zu erreichen jede andere Art und Weise

Answer 1

Was ist die z-Ordnung da? sein z-Index. Und wie wird Zeilenumbruch innerhalb Design etwas verbessern. Wie ich die Dinge z-index und Zeilenumbrüche in Website-Layout / Design sehen, sind die letzten Dinge, die Sie verwenden sollten. Was Sie brauchen, ist die richtige Margen und Polsterungen. Lesen Sie auch über negative Margen, bevor Sie mit z-index starten.

Überprüfen Sie diese heraus: http://www.barelyfitz.com/screencast/html-training/css / Positionierung / http://www.elated.com/articles/css-positioning/ http: //www.smashingmagazine .com / 2009/07/27 / the-definitive-guide-to-mit-negative Margen / http: //www.smashingmagazine .com / 2007/05/01 / CSS-float-Theorie-Dinge-you-sollte-know /

Answer 2

This is what ended up working for me:

I just placed the top image (a part of the layout, sort of an edge which creeps over onto the image in one part) in the layout like normal (left aligned in a statically sized div, which is in the center of the page).

Then I made the other two absolutely positioned, at just 0,0 (but it doesn't matter where).

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

then using a bit of JavaScript, I fixed the position of the other two images:

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

it might not be the best way to do it, but it works and I'm being pressured for this project to be finished, so it will have to do for now.

Answer 3

Carson,

The <center> tag is deprecated.(to my knowledge). I believe if you since you've set the div to width:686px, you can use margin:0 auto.

For what I believe is the effect you're attempting, maybe this jQuery slideshow tutorial will help.

It uses an unordered list made horizontal, makes only one list visible at a time, and scrolls through them automatically. You can change the sliding feature to 'fade' in the slideshow.js like so:

 $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

change the above fx:'scrollLeft' to fx: 'fade' so it'll look like this:

$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'

Also, after building this, use your images as list items, and replace the pagination texts in the tutorial to the relevant image thumbnails.

You can tinker with the speeds & time out & it also works well without javascript enabled.

Also, if this doesn't help you achieve the effect you want, can you make a sketch? The use of 'overlapping' is a bit confusing.

Answer 4

apply display: block; to your img tags' styling.