1
genişliğinde küçültülürken kapsayıcı div ile örtüşüyor, başlıkta küçük bir sorun var, pencereyi genişlediğinde genişletmeyi gerektiren bir ortam sorgusu ekledim ancak aslında kapsayıcımla çakışıyor . Ben kabın üst konumda düşürmek için başka medya sorgu eklemek çalışıyorum amaSabit başlıktaki başlık, pencere genişliği
https://jsfiddle.net/Ltqsjhbz/1/
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background: black;
background-position: center;
height: 200px;
color: white;
}
#menu li {
display: inline;
}
@media screen and (max-width: 600px) {
#menu li {
display: block;
margin: 30px;
}
header {
height: 400px;
}
#container {
position: absolute;
top: 400px;
}
}
#menu a {
background-color: #00BFFF;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 40px 4px;
}
#menu a:hover {
background-color: #0489B1;
}
h1,
h2,
nav {
text-align: center;
margin: 30px;
}
h3,
form,
footer {
text-align: center;
}
#container {
position: absolute;
top: 200px;
left: 0px;
}
.fig {
display: block;
margin: auto;
}<header>
<h1>Title</h1>
<h2>title</h2>
<nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</nav>
</header>
<div id="container">
<img class="fig" src="https://www.organicfacts.net/wp-content/uploads/2013/05/watermelon2.jpg" alt="figure 1">
</div>