Неправильное позиционирование в HTML

Question

Недавно принялся изучать WEB, поэтому полно ошибок, и вот одна из них, которая возникает по непонятной мне причине.
В чём может быть проблема?

body {
    background: rgb(32, 32, 32);
}

#go_to_another_page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
    padding: 30px auto;
    border: 5px solid rgb(128, 128, 128);
}

h1 {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: monospace;
    font-size: 40px;
    color: rgb(96, 96, 96);
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
    color: rgb(162, 162, 162);
}

button {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: monospace;
    outline: none;
    cursor: pointer;
    background: rgb(32, 32, 32);
    font-size: 30px;
    color: rgb(128, 128, 128);
    border: 5px solid rgb(96, 96, 96);
}

u {
    position: absolute;
    right: 0%;
    bottom: 0%;
    font-family: monospace;
    color: rgb(192, 192, 192);
}

a {
    font-family: monospace;
    color: pink; 
}

#Counter_ID {
    position: absolute;
    left: 0%;
    bottom: 0%;
    font-family: monospace;
    color: rgb(192, 192, 192);
}

<!Doctype html>
<html>
    <head>
        <meta charset = "utf-8"/>
        <title>Заглавная страница</title>
        <link rel = "stylesheet" href = "HomePageStyle.css"/>
    </head>
    <body>

        <p id = Counter_ID>Количество пользователей: 0</p>

    </body>
</html>

Answer 1

margin попробуй убрать у body.

Answer 2

Попробуйте <p> взять в одельный <div>. А лучше воспользуйтесь меню разработчика. В Chrome это правый щелчок и нажать "Просмотреть код". Там все будет видно где у вас ошибка

Answer 3

Если используете position: absolute, то нужно задавать чему-то и position: relative (в данном случае, это <body>).
Если блокам не задавать размеры, то они либо растягиваются, либо схлопываются. А так, как Вы, по сути, изымаете из потока параграф, используя абсолютное позиционирование, то пустой <body> без размеров - схлопывается по высоте. Далее, параграф пытается найти bottom нижний край своего родителя (<body>), а он находится там же, где и top - вверху, потому что схлопнулся. Поэтому явно задаём размеры, если <body> пустой.
Ну и конфликт стилей. А, вернее - задаёте новые свойства, не обращая внимания на уже существующие. Внимательно посмотрите на изменения в коде ниже.

body {
  margin: 0;
  height: 100vh;
  position: relative;
  background: rgb(32, 32, 32);
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: sans-serif;
  font-size: 20px;
  color: rgb(162, 162, 162);
}

#Counter_ID {
  position: absolute;
  top: auto;
  left: 0%;
  bottom: 0%;
  transform: none;
  font-family: monospace;
  color: rgb(192, 192, 192);
}


/*
#go_to_another_page {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px auto;
  border: 5px solid rgb(128, 128, 128);
}

h1 {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: monospace;
  font-size: 40px;
  color: rgb(96, 96, 96);
}

button {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: monospace;
  outline: none;
  cursor: pointer;
  background: rgb(32, 32, 32);
  font-size: 30px;
  color: rgb(128, 128, 128);
  border: 5px solid rgb(96, 96, 96);
}

u {
  position: absolute;
  right: 0%;
  bottom: 0%;
  font-family: monospace;
  color: rgb(192, 192, 192);
}

a {
  font-family: monospace;
  color: pink;
}
*/

<!Doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Заглавная страница</title>
  <link rel="stylesheet" href="HomePageStyle.css" />
</head>

<body>
  <p id="Counter_ID">Количество пользователей: 0</p>
</body>

</html>

Answer 4

В данном случае к абзацу применяются и стили описанные для селектора p и стили описанных для селектора #Counter_ID

В итоге расположение элементу задается с помощью следующих свойств:

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  left: 0%;
  bottom: 0%;

Причем left: 0 перебивает left: 50% так как класс описан позже.

Исходя из этих значений и располагается элемент:

верх элемента на уровне 50%
низ элемента в нуле
слева 0
и все это сдвинуто влево-вверх на половину самого элемента.

если необходимо было разместить элемент слева внизу, необходимо было сбросить значения transform и top

body {
  background: rgb(32, 32, 32);
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: sans-serif;
  font-size: 20px;
  color: rgb(162, 162, 162);
}

#Counter_ID {
  position: absolute;
  left: 0%;
  bottom: 0%;
  font-family: monospace;
  color: rgb(192, 192, 192);
  
  top: auto;
  transform: translate(0, 0);
}

<p id="Counter_ID">Количество пользователей: 0</p>

БЛОГ НА HUSL

Неправильное позиционирование в HTML

Ответы (4 шт):