HTML-изменение позиции при изменении размера окна

{% load staticfiles %} 
<!DOCTYPE html> 
<html> 
<head> 
<title>Example</title> 
<link href="{% static 'css/hover.css' %}" rel="stylesheet" media="all"> 
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 

<!-- CSS -->  
<style> 

.menu { 
font-family: sans-serif; 
background: blue; 
padding: 5px; 
width: 130px; 
z-index: 100; 
bottom: 200px; 
right: 700px; 
box-shadow: 5px 5px 5px; 
border-radius:5px 5px 5px 5px; 
margin-bottom: 160px; 
position: relative;left:700px;top:250px; 

} 

.menu a, 
.menu h3 { 
font-size: 0.9em; 
display: block; 
margin: 0 0.5em; 
color: white; 
} 

input { 
    width: 120px; 
} 

</style> 
</head> 
<body> 


<!-- HTML --> 
<main> 

<nav class="menu"> 
<div id='wrapper'> 
<h3>Login</h3> 

<form method='POST' class= "post-form"> {{ form.as_p }} </form> 

<a href="#" class="hvr-grow">Create Account</a> 
</div> 

</nav> 

</main> 

</body> 
</html>

Он просто отображает квадратное меню в середине экрана, пока не измените размер окна. Он больше не остается в центре, как я могу это изменить? Я пробовал использовать min-width, но безрезультатно. Как мне заставить его оставаться на месте?HTML-изменение позиции при изменении размера окна

источник

2017-02-13 Amon

Попробуйте

.menu { 
 
font-family: sans-serif; 
 
background: blue; 
 
padding: 5px; 
 
width: 130px; 
 
z-index: 100; 
 
box-shadow: 5px 5px 5px; 
 
border-radius:5px 5px 5px 5px; 
 
margin-bottom: 160px; 
 
position: relative; 
 
top:250px; 
 
margin: auto; 
 
} 
 

 
.menu a, 
 
.menu h3 { 
 
font-size: 0.9em; 
 
display: block; 
 
margin: 0 0.5em; 
 
color: white; 
 
} 
 

 
input { 
 
    width: 120px; 
 
}

<main> 
 
    <nav class="menu"> 
 
    <div id='wrapper'> 
 
     <h3>Login</h3> 
 
     <form method='POST' class= "post-form"> {{ form.as_p }} </form> 
 
     <a href="#" class="hvr-grow">Create Account</a> 
 
    </div> 
 
    </nav> 
 
</main>

JsFiddle - https://jsfiddle.net/f39wurmn/

источник

2017-02-13 05:06:07 grinmax

спасибо, что, казалось, на работу! Так в чем разница между «margin-top» и «top», например? – Amon

@ Если вам лучше понять свойства CSS и как они работают – grinmax

это другой элемент позиционирования значения, Top работает, когда элемент имеет позицию: относительный или абсолютный – grinmax

Вы жёстко позиционирование меню. Вместо этого установите тело на position: relative и ваш nav на position: absolute. Затем вы можете использовать функцию css calc(), чтобы центрировать ваш навигатор на любой странице размера. Смотрите пример:

html { 
 
    min-height: 100%; 
 
    } 
 
body { 
 
    height: 100vh; 
 
    width: 100%; 
 
    position:relative; 
 
    } 
 

 
.menu { 
 
position: absolute; 
 
font-family: sans-serif; 
 
background: blue; 
 
padding: 5px; 
 
width: 130px; 
 
z-index: 100; 
 
top:calc((100vh - 2.7em - 10px)/2); 
 
right:calc((100% - 140px)/2); 
 
box-shadow: 5px 5px 5px; 
 
border-radius:5px 5px 5px 5px; 
 

 

 

 
} 
 

 
.menu a, 
 
.menu h3 { 
 
font-size: 0.9em; 
 
display: block; 
 
margin: 0 0.5em; 
 
color: white; 
 
} 
 

 
input { 
 
    width: 120px; 
 
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all"> 
 

 

 

 

 
<!-- HTML --> 
 
<main> 
 

 
<nav class="menu"> 
 
<div id='wrapper'> 
 
<h3>Login</h3> 
 

 
<form method='POST' class= "post-form"> {{ form.as_p }} </form> 
 

 
<a href="#" class="hvr-grow">Create Account</a> 
 
</div> 
 

 
</nav> 
 

 
</main>

источник

2017-02-13 05:15:31 wlh

Это тоже хорошо работает, разница между этим ответом и другой заключается в том, что это приводит к прокручиваемой странице. Это лучше или хуже? – Amon

HTML-изменение позиции при изменении размера окна

ответ

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