Question

我是HTML和CSS的新手，也是这个论坛的新手。我在浏览器缩放功能方面遇到了一些麻烦。我想把图像粘贴到我的DIV的bottem上，就像我在这张照片中给你看的那样。 http://imageshack.us/a/img29/1417/n81h.png

但是当我使用浏览器进行缩放时，图像移动并且不再与DIV的底部对齐，就像这里： http://imageshack.us/a/img14/221/vrqd.png

我该怎么办？我搜索了很多，但找不到明确的答案。谢谢！

<head>
    <title>Marco Maissan - Portfolio</title>
    <link href="MyStyle.css" rel="stylesheet" type="text/css" />
</head>

<body style="background:#81DAF5">
    <div>
        <div ID="Page1">
            Welcome at my portfolio
            <div ID="Creative">Being creative is being me</div>
            <div><img id="head" src="head2.png"/></div>
        </div>            
        <div ID="Page2">Random Text 2 :)</div>
        <div ID="Page3">Random Text 3 :)</div>
    </div>        
</body>

}

#Page1{
    font-family:Cartoon;
    font-size:100px;
    text-align:center;
    background-color:#D8D0F4;   
    width:80%;
    height:80vh;   
    border-radius:60px;
    margin: 10vh auto 10vh auto;
    border: 10px solid #FFE1E1;

}


#Page2{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 10vh auto;
    border: 10px solid #FFE1E1;
}

#Page3{
    font-family:Cartoon;
    font-size:30px;
    text-align:center;
    background-color:#D8D0F4;
    width:80%;
    height:80vh;
    border-radius:60px;
    margin: 20vh auto 0vh auto;
    border: 10px solid #FFE1E1;
}

#Creative{
    font-family:cartoon;
    font-size:50px;
}

Answer 1

如果你想把你的物体贴在某处，你可以使用绝对定位！如果你想使用绝对定位将一个对象放在父div中固定的某个位置，你的父div应该有一些位置（固定，相对，绝对）（否则绝对定位会发生）来自body元素!!!）

因此，总而言之，您应该使用position:relative代表Page1 div，然后将position:absolute;bottom:0;用于包含您图片的div！

浏览器缩放时图片移动

1 个答案: