CSS Почему блоки div перекрываются?
Я пытаюсь создать отзывчивый веб-сайт, используя только CSS. .У меня есть контейнер, в котором есть весь код. Внутри у меня есть nav div и средний div. Контейнер позиционируется относительно, в то время как навигация и середина позиционируются абсолютно. Кроме того, немного странный вопрос, но в Internet Explorer (не судите) раскрывающееся меню раздела навигации открывается горизонтально, а не вертикально. Кажется, я не могу найти причину, по которой он это делает.
Вот код (мои оригинальные коды css были улучшены Крисом Хэппи из css- почему мой навигационный div и средний div перекрываются?)
div#Container
{
position: relative;
}
.nav
{
width: 100%;
position: absolute;
background-color: white; /*Code to add a white background to list*/
padding: 15px;
}
.nav a
{
color: #ffffff;
text-decoration: none;
background-color: #000000;
}
.nav ul
{
display:block;
}
.nav ul a
{
display: block;
float:left;
width: 150px;
padding: 10px 20px;
border: 1px solid #ffffff;
text-align: center;
font-size: 1.3em;
}
.nav ul a:hover
{
background: red;
}
.nav ul li
{
display: inline-block;
vertical-align: top;
}
.nav ul ul li { display: block; }
.nav ul li:hover > ul
{
display:block;
}
.nav ul li ul
{
margin:0;
padding: 0;
display: none;
background-color: #000000;
top: 45px;
}
div#middle
{
position: absolute;
}<div id = "Container">
<div class = "nav">
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">Cars</a></li>
<li><a href = "#">Parts & Tools</a>
<ul>
<li><a href = "#">Parts</a></li>
<li><a href = "#">Tools</a></li>
</ul>
</li>
<li><a href = "#">About</a></li>
<li><a href = "#">Contact</a></li>
</ul>
</div>
<div class = "middle">
<p>text</p>
</div>
</div>Кроме того, поместите сюда HTML и CSS, которые принадлежат вместе, в один фрагмент кода - запускать каждый по отдельности в отдельных фрагментах довольно бессмысленно.
Ответ на предыдущий вопрос улучшил отзывчивость моего веб-сайта. Я добавил ответ к их ответам, но с тех пор не получил ответа.
Хорошо, я поместил все в один фрагмент. Я сначала все разделил, чтобы улучшить читаемость.
Ответы 1
Я не вижу HTML для среднего div, но абсолютная позиция означает фиксированную позицию относительно «фрейма» в вашем случае к div #container. Таким образом, div nav и средний div перекрываются, потому что они игнорируют друг друга и оба позиционируются относительно div #container. вы можете указать divs с фиксированной шириной и высотой, а также с фиксированным отступом, чтобы они не сталкивались. Пример:
.nav
{
position: absolute;
margin-top: 0;
margin-left: 0;
width: 300px;
}
.middle
{
position: absolute;
margin-top: 0;
margin-left: 300px;
}Другой пример
<html>
<head>
</head>
<body>
<div style = "position: relative;border: solid;margin: 40px;height: 300px;">
<div style = "position: absolute; margin: 50px 100px; border: solid; width: 100px;height: 100px;">
</div>
<div style = "position: absolute; margin: 40px 90px; border: solid; width: 100px;height: 100px;">
</div>
</div>
</body>
</html>О, теперь я понял. Спасибо! Что, если бы я хотел расположить середину относительно контейнера навигации, но при этом сохранить навигацию относительно контейнера? или это просто плохая практика веб-разработки?
Внутри вашего контейнера я бы использовал абсолютную позицию. Они по-прежнему «относительны» к контейнеру, но это все равно что добавить картинку в Word. В большинстве случаев все остальное происходит не так, потому что два div с относительной позицией делают позицию по отношению друг к другу и помещают каждый в новую строку. И имеет значение, является ли div 1 относительным или div 2. Так что не бездельничайте и дайте каждому четкую позицию.
Так в чем же здесь настоящая проблема - не были ли ваши частично совпадающие проблемы не устранены с ответами на ваш предыдущий вопрос? Затем вам следует попытаться прояснить это с людьми, которые там ответили, а не создавать новый вопрос на ту же тему.