Изменение размера окна приводит к смещению изображения влево

Question

Изменение размера окна приводит к смещению изображения влево

0

Я работаю над сайтом, где он содержит два div (один заголовок и один ниже). Теперь, когда я изменяю размер окна, изображение в заголовке перемещается влево.
Ниже приведен код HTML:

<div id="header"><img src="images/test" style="position:absolute;right:170px;top: 25px"/>

CSS:

div#header {

    width: 100%;
    margin: 0 auto;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    height: 50px;  
    border: 2px solid black;
}

div#container {
float:left;
background:url('./css/bg.jpg') no-repeat 50% 50%;background-attachment:contain;background-size: local;
position: relative;
    width: 100%;
    height: 695px; 
    border: 2px solid black;

}

Fiddle Как настроить такую настройку, чтобы изображение в заголовке оставалось там, где оно было раньше (справа), когда окно изменено и не перемещается влево

user3004356 09 май 2014, в 04:59

Источник

0

Я не понимаю, в чем проблема ... JSFiddle работает нормально. Изображение не перемещается при изменении размера окна.
JayRow 09 май 2014, в 02:56
0

Какой браузер вы используете?
Patrick 09 май 2014, в 02:58
0

Я использую Firefox
user3004356 09 май 2014, в 02:59
0

На Chrome, Firefox, Opera и Safari выглядит на 100% нормально ...
Fizzix 09 май 2014, в 03:02
0

FireFox снова, хм, слишком раздражает ...
King King 09 май 2014, в 03:02
0

может быть, я должен обновить браузер
user3004356 09 май 2014, в 03:05
0

Вы имеете в виду, что при изменении размера изображение постепенно сдвигается влево до тех пор, пока оно вообще не переходит на правую сторону, и в конечном итоге все вместе смещается с левой стороны экрана, когда вы изменяете размер достаточно мал? Это проблема, о которой вы говорите?
Mark Miller 09 май 2014, в 03:16

Показать ещё 5 комментариев

Теги:

html

css

2 ответа

Ещё вопросы

Я не понимаю, в чем проблема ... JSFiddle работает нормально. Изображение не перемещается при изменении размера окна.
На Chrome, Firefox, Opera и Safari выглядит на 100% нормально ...
FireFox снова, хм, слишком раздражает ...
может быть, я должен обновить браузер
Вы имеете в виду, что при изменении размера изображение постепенно сдвигается влево до тех пор, пока оно вообще не переходит на правую сторону, и в конечном итоге все вместе смещается с левой стороны экрана, когда вы изменяете размер достаточно мал? Это проблема, о которой вы говорите?

adamj · Answer 1 · 2014-05-09T00-41-00.000Z

edit: Если проценты являются опцией, попробуйте ниже.

Используйте проценты, которые гарантируют, что они будут придерживаться определенного места: http://jsfiddle.net/chju4/2/

HTML:

<div id="header"><img src="images/test" style="position:absolute;right:30%;top: 25px"/>
</div>
<div id="container">
</div>

CSS:

div#header {

    width: 100%;
    margin: 0 auto;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    height: 50px;  
    border: 2px solid black;
}

div#container {
float:left;
background:url('./css/bg.jpg') no-repeat 50% 50%;background-attachment:contain;background-size: local;
position: relative;
    width: 100%;
    height: 695px; 
    border: 2px solid black;

}

Да, вы украли слова прямо из моего рта ... просто избили меня примерно на 12 минут :) Уверен, это решает +1
@MarkM Ха-ха, я не был уверен, если проценты вариант, поэтому я сказал, что вы все равно идти!

Mark Miller · Answer 2 · 2014-05-09T01-33-00.000Z

Я мог бы неправильно понять вашу проблему, но я думаю, что это связано с right:170px; в изображении встроенного стиля. Черный ящик относительный - он сжимается с окном, но изображение всегда равно 170px с правой стороны - поэтому, когда окно, скажем, шириной всего 100 пикселей, изображение отжимает экран. Попробуйте изменить right:170px в процентах или em.