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

Question

Существует разрыв строки между двумя <img> теги, и они имеют отступ в документе для удобства форматирования.

Но я использую относительное позиционирование и z-order для размещения одного изображения (части макета) поверх другого.

У меня есть что-то вроде этого

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

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

Могу ли я заставить это сработать?

редактировать - дополнительная информация

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

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

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

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

Answer 1

Что это там за z-порядок?его z-индекс.И как разрыв строки в дизайне что-нибудь улучшит.На мой взгляд, z-индекс и разрывы строк в макете / дизайне веб-сайта - это последнее, что вам следует использовать.Что вам нужно, так это правильные поля и отступы.Также прочитайте об отрицательных полях, прежде чем начать использовать 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

Это то, что в конечном итоге сработало у меня:

Я просто разместил верхнее изображение (часть макета, что-то вроде края, который переходит на изображение в одной части) в макете как обычно (выровнено по левому краю в статическом размере 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 3

Карсон,

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

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.

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

Answer 4

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