Почему теги <a>сталкиваются друг с другом, когда позиция: абсолютная? - PullRequest
Новая
       0

Почему теги <a>сталкиваются друг с другом, когда позиция: абсолютная?

0 голосов
/ 30 апреля 2020

Я играю с позицией: относительной и абсолютной в настройках навигационной панели. Все шло, как и ожидалось, пока я не установил теги <a> в положение: absolute и слова не свернулись друг с другом, их отступы по умолчанию между каждым словом остались до свидания!

Я действительно ничего не пытался исправить, потому что даже не знал, с чего начать!

Почему это произошло и как мне вернуть их в нормальное состояние? (А также иметь возможность применять отступы между ними, чтобы разложить их?) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
      integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ="
      crossorigin="anonymous"
    />
  <title>Practice</title>
  <style>
    * {
      padding: 0%;
      margin: 0%;
      box-sizing: border-box;
      font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    }

    header {
      position: relative;
      background: red;
      height: 150px;
      width: 100%;
    }

    i {
      position: absolute;
      top: 30px;
      left: 30px;
      color: #fff;
    }

    h1 {
      font-size: 36px;
      position: absolute;
      top: 45px;
      left: 100px;
    }

    a {
      color: #fff;
      text-decoration: none;
      position: absolute;
      top: 60px;
      right: 100px;
    }

  </style>
</head>

<header>
    <i class="fas fa-user-astronaut fa-4x"></i>
    <h1>Hey Whatsup!</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#info">Info</a>
        <a href="#purchase">Purchase</a>
        <a href="#contact">Contact</a>
    </nav>
</header>
<body>

</body>
</html>

Ответы [ 4 ]

1 голос
/ 30 апреля 2020

Вы должны установить положение родительского элемента <nav>, а не <a> тегов. Я показал это в коде ниже.

Вот несколько советов для вас, так как вы начинающий. Используйте свойства позиции только при необходимости. <header> всегда должен находиться внутри тега <body>. (как показано в коде) `

a {
  color: #fff;
  text-decoration: none;
  display:inline-block;
  margin-left:10px;
}

nav{
  position:absolute;
  top:60px; right:100px;
}
<body>
  <header>
      <i class="fas fa-user-astronaut fa-4x"></i>
      <h1>Hey Whatsup!</h1>
      <nav>
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#info">Info</a>
          <a href="#purchase">Purchase</a>
          <a href="#contact">Contact</a>
      </nav>
  </header>
</body>

`

Понимание абсолютной позиции

Если элемент имеет абсолютное значение, элемент будет реагировать на размеры весь документ. Например, если вы установите значение top: 0 и left: 0, элемент будет размещен в верхнем левом углу окна браузера. Вы можете прочитать больше об этом здесь. CSS Позиции

0 голосов
/ 30 апреля 2020

Вместо a вы можете установить позиционирование для их родительского элемента (nav). 

nav {
  position: absolute;
  top: 60px;
  right: 100px;
}

a {
  color: #fff;
  text-decoration: none;
}

Демо: https://jsfiddle.net/6st0129p/

0 голосов
/ 30 апреля 2020

Приятно видеть, что вы начинаете с Html / css.

Проблема в том, что вы указали абсолютную позицию для каждого из элементов (тег значка, тег h1 и тег). Абсолютно позиционированные элементы, позиционируются относительно ближайшего позиционированного предка (вместо позиционированного относительно окна просмотра).

Свойство Position - https://www.w3schools.com/cssref/pr_class_position.asp

Поэтому мы обычно надеваем Не указывайте положение: абсолютное для элементов в навигации. Вы можете использовать flexbox, чтобы расположить содержимое заголовка рядом друг с другом.

Flexbox - https://www.w3schools.com/css/css3_flexbox.asp

Таким образом, вы можете удалить абсолютную позицию из всех элементов и дать отображение: согните заголовок, тогда у вас будут соседние элементы друг другу

Ничего страшного, если вы просто пробуете, как они будут выглядеть при позиционировании, тогда ничего страшного. Я надеюсь, что вы поняли это.

Всего наилучшего!

0 голосов
/ 30 апреля 2020

Почему это произошло?

Проблема в том, что вы сделали все элементы тега <a> absolute.

Это позволяет позиционировать элемент относительно ближайшего предка.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

Как мне вернуть их к нормальному состоянию?

Просто удалите position: absolute;, тогда как соответствующие объявления о позициях, например, top: 60px; right: 100px;, и вы должны быть хорошими в go.

Пример 

    a {
      color: #fff;
      text-decoration: none;
    }

А также иметь возможность применять отступы между каждым разложить их?

Что касается их распространения, вы можете просто добавить margin-right:--- к своим ссылкам.
т.е. 

    nav a {
      color: #fff;
      text-decoration: none;
      margin-right: 1em;
    }

   nav a:last-child {
     margin-right: 0;
   }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...