Могу ли я сделать пробелы между тегами HTML, чтобы они не мешали относительному позиционированию?

Question

Между двумя тегами <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> добавляет пробел, а затем, когда я устанавливаю относительную левую позицию второго тега <img>, этот пробел учитывается, и он устанавливается немного правее первого изображения.

Я не хочу помещать их в одну строку, сделать нижний тег изображения фоном не вариант (он должен быть измерен), а вопрос с относительной позицией исключен (I ' м при условии, что в разных браузерах / системах пробелы будут разных размеров).

Могу ли я сделать эту работу?

edit - больше информации

Интервал отбрасывает относительное положение. Разве нельзя просто позиционировать их абсолютно, кроме left и top другого элемента, который имеет статическое позиционирование?

В любом случае, макет в его текущем состоянии имеет изображение, перекрывающее другое изображение. Наложенное изображение - это фон div, а фрагмент макета - это изображение в div.

Мне нужно изменить перекрывающееся изображение при щелчке по ссылке (щелчок по миниатюре изображения, и в перекрывающемся изображении появляется увеличенная версия). Но все изображения имеют разные размеры, больше, чем фоновое изображение div по умолчанию. Я не могу изменить размер div-фона, поэтому это должно быть изображение. Но проблема в том, что одно изображение перекрывает другое. Они хотят, чтобы я также выцветал между изображениями, поэтому мне нужны два изображения, накладываемые друг на друга (верхнее и нижнее), плюс край макета поверх них.

Я не знаю, как это сделать любым другим способом

Answer 1

Что это за 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/

Answer 2

Carson,

Тег <center> устарел (насколько мне известно). Я полагаю, что если вы установили div в width: 686px, вы можете использовать margin: 0 auto.

Поскольку я считаю, что вы пытаетесь добиться эффекта, может быть, вам поможет 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

е

измените вышеприведенный fx: 'scrollLeft' на fx: 'fade', чтобы он выглядел так:

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

Кроме того, если это не поможет вам достичь желаемого эффекта, можете ли вы сделать эскиз? Использование «перекрытия» немного сбивает с толку.

Answer 3

Вот что у меня получилось:

Я только что поместил верхнее изображение (часть макета, своего рода край, который ползет на изображение в одной части) в макете, как обычно (выровненный по левому краю в статически div, который находится центр страницы).

Затем я сделал два других абсолютно позиционированных, всего 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, я исправил положение двух других изображений:

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

это может не быть лучшим способом сделать это, но это работает, и я вынужден закончить этот проект, так что он должен будет сделать сейчас.

Answer 4

применить display: block; к вашему стилю img тегов.