Базовое позиционирование CSS

#html #css

#HTML #css

Вопрос:

У меня есть две картинки, одна с функцией «onclick», которая исчезает, а на ее месте появляется другая картинка. Я просто пытаюсь выяснить код, который сделает один div (#b1) слева от второго (#b2) и расположит их на ровном уровне, а при нажатии #f1 появится вместо #b2, но с компенсацией размера изображенияслева от него. Моя проблема заключалась в том, что у меня было перекрытие изображений, и я хочу, чтобы их позиции корректировались.

Что у меня было:

 #b1 { position:absolute;  }
#b2 { position:relative; left:500px;}
#f1 { position:relative; left:500px;}
 

Ответ №1:

Попробуйте это:

 #b1, #b2, #f1 {
    float:left;
}
 

Ответ №2:

Как только вы позиционируете вещи абсолютно, эти вещи удаляются из «потока» документа и не могут повлиять на положение чего-либо еще на странице. Вам придется вручную обнаруживать коллизии и корректировать позиции с помощью JS или реструктурировать свой html так, чтобы некоторый родительский контейнер был расположен абсолютно, а изображения находились внутри этого контейнера, расположенные относительно.