当我将窗口拖动到不同的尺寸时,为什么这些图像会移动位置?

时间:2015-02-06 07:44:27

标签: html css css-position

我正在为客户建立一个网站,当我将窗口屏幕移动到不同的大小时,我正在努力处理一些移动位置的图像。我希望这些图像能够保持原样。

这是代码。 **指的是正在移动的图片

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会修复它......

1 个答案:

答案 0 :(得分:1)

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

运动图像的'position'设置为'absolute'。这会导致你的问题。'绝对'元素的位置由它的'包含块'决定。 “绝对”元素的“包含块”是最接近的“定位”祖先,这意味着祖先将“位置”设置为“相对或绝对或固定”但不是“stacitc”。 reference on containing block

other reference