Как зафиксировать элемент в css

Question

Делаю реализацию чата, добавил элемент Online list, он должен быть строго фиксированный в левом верхнем углу, но почему то он перемещается вместо с сообщениями, как исправить? Вот скрин:

Cообщения пользователей и оповещение о подключении добавляются с помощью innerHTML(сообщения с помощью append) index.html

<body>
    <ul class="messages"></ul>
    <div class = "online_list">&#9776; Online list</div>
    <div class = "user_connect"></div>
    <form class = "form" action="">
      <div class="name"></div>
      <input type = "text" class = "input" autocomplete="off">
      <button class="btn">Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src = "assets/main.js"></script>
</body>

style.css

.online_list {
    display: flex;
    padding-right: 15px;
    justify-content: end;
    border: black;
    font-size: 20px;
    font-weight: bold;
}

и index.js(если кому надо увидеть как добавляются сообщения)

socket.on('chat message', (msg) => {
    const item = document.createElement('li');
    item.innerHTML = `<span>${msg.name}</span>: ${msg.message}`;
    messages.appendChild(item);
    window.scrollTo(0, document.body.scrollHeight);
})

socket.emit('connect user', {
    nameConnect: userName
});

socket.on('connect user', (userName) => {
    const item = document.createElement('div');
    item.innerHTML = `Пользователь <b><span class = "user">${userName.name}</span></b> подключился к чату!`
    userConnect.append(item);
})

Answer 1

Я бы попробовал расставить все блоки по секциям: header, main и footer

Также я убрал из элемента .online_list стили: justify-content: end; display: flex;, т.к. вы хотите, чтобы он находился в левом углу

Также, т.к. у вас будут идти сообщения, то нужно сделать фиксированную высоту элементу <ul class="messages"></ul>, например height: 100vh и, чтобы обрезать содержимое - overflow-y: auto

  <div class="chat">
    <header>
      <div class="online_list">&#9776; Online list</div>
    </header>
    <main>
      <ul class="messages">
        <li>
          <span>Message</span>
        </li>
        <li>
          <span>Message</span>
        </li>
        <li>
          <span>Message</span>
        </li>
      </ul>
      <div class = "user_connect"></div>
    </main>
    <footer>
      <form class = "form" action="">
        <div class="name"></div>
        <input type = "text" class = "input" autocomplete="off">
        <button class="btn">Send</button>
      </form>
    </footer>
  </div>

.online_list {
 padding-right: 15px;
 border: black;
 font-size: 20px;
 font-weight: bold;
}

.messages {
  height: 100vh;
  overflow-y: auto;
}

.chat {
  display: flex;
  // Чтобы они все были друг под другом
  flex-direction: column;
}

БЛОГ НА HUSL

Как зафиксировать элемент в css

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