Изменение позиции кнопки при расширении окна

Я пытаюсь создать веб-страницу, где верхнее деление - это изображение с прозрачной кнопкой на нем. Проблема в том, что каждый раз, когда я сворачиваю окно, кнопка меняет положение. Может ли кто-нибудь сказать мне, в чем проблема?Изменение позиции кнопки при расширении окна

<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

Set 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

Изменение позиции кнопки при расширении окна

ответ

Смежные вопросы