Question

我正在开发一个网站，其中包含两个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 如何调整以使标题中的图像保持在调整窗口大小之前（向右端）的位置，而不是向左移动

Answer 1

修改：如果百分比是一个选项，请尝试以下操作。

使用百分比，确保它能够粘贴到某个位置：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;

}

Answer 2

我可能会误解你的问题，但我认为它与图像的内联样式中的right:170px;有关。黑匣子是相对的 - 它随窗口缩小，但图像总是从右侧170px - 所以当窗口，例如，只有100px宽，图像被推离屏幕。尝试将right:170px更改为百分比或em。

窗口大小调整会导致图像向左移动

2 个答案: