当我展开窗口时，按钮位置发生变化

我想要设计一个网页，顶部是一个带有透明按钮的图像。问题是，每次我最小化窗口时，按钮都会改变位置。谁能告诉我问题是什么？当我展开窗口时，按钮位置发生变化

<html lang=="en"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<head> 
    <meta charset="utf-8"> 
    <title>Deut65</title> 
    <link href="site.css" rel="stylesheet"> 
</head> 

<body> 

<ul id="nav"> 
    <img id="logo" src="logo.png"></img> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#editor">Editor</a></li> 
    <li><a href="#about">About</a></li> 
</ul> 


    <div id="image-div"> 
     <img id="top-image"src="fotoDeut65.jpeg"> 
     <button id="image-button">Button</button> 
    </div> 


<style> 


#image-div{ 
    top: -50%; 
    left: -50%; 
    width: 100%; 
    height: 100%; 
} 

#top-image{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 100%; 
    min-height: 100%; 
    width: 400px; 
    height: auto; 
} 

#image-button{ 
    position: relative; 
    z-index: 1; 
    margin-left: auto; 
    margin-right: auto; 
    top: 191px; 
    left: 420px; 
    right: -420px; 
    bottom: -191px; 
} 
</style> 




<!--until here--> 
</body> 
</html>

来源

2016-07-24 Beginner_B

SEMS工作？ https://jsfiddle.net/snn90fm5/ – Aer0

设置position:absolute;如果你想在IMG 风格上面有misstakes按钮浮动，请尝试以下综合：

<style> 
#image-div{ background:lightblue; 
} 

#top-image{ 
width:100px;height:100px; 
} 

#image-button{background:red;  
position: absolute; 
left:0; 
width:100px;height:100px; 
} 
</style>

来源

2016-07-24 13:19:56 kollein

当我展开窗口时，按钮位置发生变化

回答

相关问题