Сделайте так, чтобы не вложенный div не перепрыгивал при изменении размера окна

Question

Сделайте так, чтобы не вложенный div не перепрыгивал при изменении размера окна

0

У меня есть поле div, которое в HTML-коде ниже всего другого содержимого и не вложено ни во что другое. В CSS я поместил div в верхнем правом углу сайта, и когда я изменяю размер окна, чтобы он не соответствовал, он перескакивает на сайт. Мне не разрешено изменять код HTML (это школьное задание).

Есть ли способ заставить этот прыгающий div-блок оставаться на месте относительно основного контента?

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

Div CSS (если это помогает):

#extraDiv1 {
    background-image: url('images/koala.png');
    background-repeat: no-repeat;
    background-size: 250px;
    width: 250px;
    height: 370px;
    float: left;
    margin-left: 20px;
    margin-top: -610px;
    position: relative;
    z-index: -1;
}

Marie 15 апр. 2014, в 09:59

Источник

0

Вы можете также разместить HTML?
Sam G-H 15 апр. 2014, в 07:59
0

Это очень долго, поэтому я не знаю, как это сделать хорошим способом. : /
Marie 15 апр. 2014, в 08:09
0

извиняюсь. хотя я мало что могу сделать без этого. может просто попробовать опубликовать соответствующую часть? или сделайте jsfiddle и ссылку на это
Sam G-H 15 апр. 2014, в 08:10

Показать ещё 1 комментарий

Теги:

html

css

1 ответ

Ещё вопросы

Это очень долго, поэтому я не знаю, как это сделать хорошим способом. : /
извиняюсь. хотя я мало что могу сделать без этого. может просто попробовать опубликовать соответствующую часть? или сделайте jsfiddle и ссылку на это

Sam G-H · Answer 1 · 2014-04-15T07-13-00.000Z

Вы можете использовать top и left атрибуты, чтобы правильно расположить свой ящик. Поскольку вы используете относительное позиционирование, это будет позиционировать его относительно его нормального положения. Поэтому, если вы хотите выровнять его с тем, где вы сказали, что хотите, вы получите что-то вроде этого:

#extraDiv1 {
    background-image: url('images/koala.png');
    background-repeat: no-repeat;
    background-size: 250px;
    width: 250px;
    height: 370px;
    position: relative;
    z-index: -1;
    border: 3px solid red;
    top: -610px;
    left: 660px;
}

Надеюсь это поможет!

Если я удаляю float: left, div остается в верхнем левом углу браузера. Я хочу, чтобы он был выровнен по содержимому (центрированному на странице), чтобы они перемещались вместе.
Вы можете сделать jsfiddle с полным HTML и CSS? сейчас я не совсем уверен, о чем ты говоришь
jsfiddle.net/dYZdR/1 Я хочу, чтобы прямоугольник с красной рамкой был над двумя боковыми полями, действуя точно так же, как боковые.
Это не сработало, потому что теперь оно застряло на месте, если вы сделаете окно браузера больше. Я хочу, чтобы он следовал за другим содержимым (всегда был над боковыми полями, даже когда окно увеличивалось или уменьшалось) и не прилипал к фону.
что ты делаешь больше? Вы могли бы просто использовать процент вместо определенного значения пикселя для left