CSS Почему div-ы перекрываются? - PullRequest
Новая
       4

CSS Почему div-ы перекрываются?

0 голосов
/ 09 октября 2018

Я пытаюсь создать адаптивный сайт, используя только CSS.У меня есть контейнер, в котором есть весь код.Внутри у меня есть Nav Div и средний Div.Контейнер позиционируется относительно, а навигация и середина позиционируются абсолютно.Кроме того, это немного странный вопрос, но в Internet Explorer (не судите) выпадающее меню навигационного подразделения открывается горизонтально, а не вертикально.Кажется, я не могу найти причину, по которой это происходит.

Вот код (мои исходные коды CSS были улучшены Крисом Хэппи из css - почему мои div и middle 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 &amp; 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>

1 Ответ

0 голосов
/ 09 октября 2018

Я не вижу HTML для среднего div, но абсолютная позиция означает фиксированную позицию по отношению к «фрейму» в вашем случае к div #container.Таким образом, div nav и div middle перекрываются, потому что они игнорируют друг друга и оба расположены относительно div #container.Вы можете задать элементам div фиксированную высоту, высоту и фиксированное поле, чтобы они не сталкивались.Пример: 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...