当我将 window 拖动到不同尺寸时，为什么这些图像会移动位置？

Question

我正在为客户建立一个网站，当我将 window 屏幕移动到不同尺寸时，我正在努力处理一些移动位置的图像。我希望这些图像准确地留在原处。

这是代码。 **指的是动起来的图片

HTML

<div id="header">                
    **<div id="pics">
        <img id ="jaytext" src="newImages/jaycousins.png">**
        <img  id="papa" src="newImages/papaPic.jpg">
        **<img id ="darkTextBackground" src="newImages/darktextbackgroubd.jpg">**
        **<img id ="commercialtext" src="newImages/commercialtext.png">**
        <img id ="leftsidebackground" src="newImages/leftsidebackground.jpg">           
    </div>

CSS

body {
    background: url(../newImages/headerBackground.jpg) repeat;
    font-family: Arial, Helvetica, sans-serif;
    //font-size: 14px;
    margin: 0;
    padding: 0;    
        min-height: 800px;
        max-height: 800px;
        min-width: 1280px;
        max-width: 1289px;

}

#header {
    background: url(../images/bg-header.png) repeat-x bottom center;
    margin: 0;  
        text-align: center;
        display: block;
        height:290px;  //height for adjust picture

}
#papa {
    display: block;     
    margin: 0 auto; 
    width: 430px;
        margin-left:0px;           
        height:270px;    
}
#jaytext{
    width:470px;
    height:110px;

    margin: 0 auto;
    display:block;
    position: absolute;
    top:5.5%;
    left:31.5%;

}
#darkTextBackground{
     margin: 0 auto;

    width:550px;
    height:73px;
    position:absolute;
        top:24.2%;
        left:31.8%; 

}
#commercialtext{
     margin: 0 auto;

    height:53px;
    width:505px;
    position:absolute;
           top:23.7%;
           left:31.70%;

}
#leftsidebackground{
    display: block;     
    margin: 0 auto;
    width:300px;
    height:500px;
    position:relative;
    left:-40%;
}

我认为在正文中添加 min/max-width min/max-height 会解决它...

Answer 1

#header{
 position:relative;/*or absolute*/
}
or
#pics{
 position:relative;/*or absolute*/
}
would help you!

动态图像 'position' 设置为 'absolute'。这会导致您的 problem.An 'absolute' 元素的位置由其 'containing block' 决定。 'absolute' 元素的 'Containing Block' 是最近的 'positioned' 祖先，这意味着祖先 'position' 设置为 'relative or absolute or fixed ' 而不是 'stacitc'。 reference on containing block

other reference

当我将 window 拖动到不同尺寸时，为什么这些图像会移动位置？

Why are these images moving positions when I drag the window to different sizes?

html

css

css-position