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

Question

Делаю блокнот. Две проблемы такие:

При добавлении большого количества текста, сдвигаются вниз иконки, которые должны быть сверху справа - как должно быть: , сдвинутые иконки: .
На CodePen сдвигается вниз дата, её хотелось бы зафиксировать в правом нижнем углу - выделенная сдвинутая дата: . Предложили закрепить элементы при помощи position: absolute - элементы уезжают влево: сcылка на CodePen

Вопрос: как исправить эти проблемы?

Answer 1

Для блока инструментов:

position: absolute; 
right: 20px; 
top: 20px;

Для блока даты:

position: absolute; 
right: 20px; 
bottom: 20px;

Помните, что position: absolute; работает в пределах контейнера с position: relative;. Не забудьте задать position: relative; тому контейнеру, в пределах которого хотите позиционировать ваши блоки.

Answer 2

Мне понравился дизайн, поэтому немного причесал верстку, далеко не идеально, по коду js конечно тоже есть вопросы, но это к вопросу не относилось. По хорошему еще нужно посидеть над этим всем чтобы привести в надлежащий вид.

var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementById("close-add");
var read = document.getElementById("modalRead");
var btn2 = document.getElementById("myBtn2");
var span2 = document.getElementById("close-read");
var span3 = document.getElementsByClassName("deleteNote")[0];
var toggle_edit = document.getElementById("edit_btn");

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

function eraseInputs() {
  document.getElementById("save_btn").classList.add("hide");
  document.getElementById("myForm").reset();
}

btn2.onclick = function() {
  read.style.display = "block";
}

span2.onclick = function() {
  read.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == read) {
    read.style.display = "none";
  }
}

function saveInput() {
  document.getElementById('title_display').innerHTML = document.getElementById('title_input').value;
  document.getElementById('display').innerHTML = document.getElementById('text_area').value;
  var element = document.getElementById("container2");
  element.classList.remove("hide");
}

span3.onclick = function() {
  var delete_note = document.getElementById("container2");
  delete_note.classList.add("hide");
  read.style.display = "none";
}

function textSave() {
  if (document.getElementById("title_input").value == "") {
      document.getElementById("save_btn").classList.add("hide");
  } else if (document.getElementById("text_area").value == "") {
      document.getElementById("save_btn").classList.add("hide");
  } else {
      document.getElementById("save_btn").classList.remove("hide");
  }
}

toggle_edit.addEventListener("click", function() {
  this.classList.toggle("active");
});

let epoch = new Date();

let za = new Date(epoch),
zaR = za.getUTCFullYear(),
zaMth = za.getUTCMonth(),
zaDs = za.getUTCDate(),
zaTm = za.toTimeString().substr(0, 5);

var note_date = document.getElementById("note_date");
var date_content = document.createTextNode(zaTm + " " + zaDs + "." + zaMth + "." + zaR);
note_date.appendChild(date_content);

body {
  margin: 0;
  overflow: hidden;
}

body > header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
  height: 6rem;
  background-color: #b5900b;
}

body > main {
  display: flex;
  flex-wrap: wrap;
  margin-top: 6rem;
  padding: 1.25rem;
  min-height: calc(100vh - 8rem);
  background-color: #5e2e0b;
  background: url(https://ltdfoto.ru/images/background2.jpg);
}

.caption {
  text-align: center;
}

.note-content {
  margin-top: 2.5rem;
}

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.25rem 1.25rem;
  padding:  2.5rem;
  width: 13rem;
  height: 13rem;
  background: url(https://ltdfoto.ru/images/background.jpg);
  background-size: cover;
}

.note-button {
  height: 3rem;
  width: 3rem;
  background-color: grey;
  border-radius: 50%;
  outline: none;
}

.modal {
  display: none;
  padding: 0 20px 20px 20px;
  margin-top: 10rem;
  position: fixed;
  z-index: 1;
  left: 25%;
  top: 20%;
  background-color: aliceblue;
  width: 50%;
  overflow: hidden;
}

.modal section {
  max-height: 200px;
  overflow: auto;
}

h3.modal-title {
  display: inline-block;
  width: 100%;
}

.modal-buttons {
  width: 7rem;
}

.modal-buttons > * {
  margin-left: 0.3rem;
}

.modal-content form {
  display: flex;
  flex-direction: column;
}

.modal-content form > header,
.modal > header{
  display: flex;
}

.modal-content form > header input,
.modal > header > h3
{
  display: inline-block;
  width: calc(100% - 6rem);
}

.close {
  color: #000;
  font-size: 38px;
  font-weight: bold;
  position: relative;
  top: 0.3rem;
  margin: 0.3rem;
}

.close:hover,
.close:focus {
  color: #aaaaaa;
  text-decoration: none;
  cursor: pointer;
}

.erase {
  font-size: 21px;
}

.erase:hover,
.erase:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.save {
  font-size: 21px;
}

.save:hover,
.save:focus {
  color: green;
  text-decoration: none;
  cursor: pointer;
}

.deleteNote {
  font-size: 21px;
}

.deleteNote:hover,
.deleteNote:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

.edit {
  font-size: 21px;
}

.edit:hover,
.edit:focus {
  color: dodgerblue;
  text-decoration: none;
  cursor: pointer;
}

.active {
  color: dodgerblue;
}

#note_date {
  width: 9rem;
  height: 1.5rem;
  float: right;
  margin-right: -2.5rem;
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Notepad</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
  <header>
    <h1>Notepad</h1>
  </header>
  <main>
    <section class="note" id="container1">
      <div class="note-content" id="addNote">
        <button class="note-button" id="myBtn"><i class="fa fa-plus-circle"></i></button>
        <p class="caption" id="new-note">Write</p>
      </div>
    </section>
    <section class="note" id="container2" class="hide">
      <div class="note-content" id="seeNote">
        <button class="note-button" id="myBtn2"><i class="fa fa-eye"></i></button>
        <p class="caption" id="see-note">See</p>
      </div>
    </section>
  </main>
  <footer>
  </footer>
  
  <div id="myModal" class="modal">
    <div class="modal-content">
      <form id="myForm" onkeyup="textSave()">
        <header>
          <h3 class="modal-title">Title: <input type="text" name="" id="title_input"> </h3>
          <div class="modal-buttons" id="controllers">
            <span id="save_btn" class="save hide" onclick="saveInput();"><i class="fa fa-save"></i></span>
            <span class="erase" onclick="eraseInputs();"><i class="fa fa-eraser"></i></span>
            <span class="close" id="close-add">&times;</span>
          </div>
        </header>
        <textarea name="modal_text" id="text_area" cols="30" rows="10"></textarea>
      </form>
    </div>
  </div>
    
  <div id="modalRead" class="modal">
    <header>
      <h3><span id="title_display">Lorem, ipsum dolor</span></h3>
      <div class="modal-buttons" id="controllers2">
        <span id="edit_btn" class="edit"><i class="fas fa-pencil-alt"></i></span>
        <span class="deleteNote"><i class="fa fa-trash"></i></span>
        <span class="close" id="close-read">&times;</span>
      </div>
    </header>
    <section>
      <p><span id="display">
      </span></p>
    </section>
    <footer>
      <div id="note_date"></div>
    </footer>
  </div>
  <!-- partial -->
  <!--<script  src="./script.js"></script>-->
</body>
</html>

Основная идея любой верстки чтобы все лежало по полочкам:

Можно поискать расширения для браузера которые покажут эту сетку, у меня стоит "Pesticide for Chrome" но похоже он пропал из стора. Однако иногда такие инструменты очень полезны.

Что касается общих советов:

class для стилей а id для событий.
как советует Вадим Макеев избавляемся от div-иоза :)
в коде js очень хорошо придерживаться некоторой структуры, чтобы сразу было понятно где что искать.
какие-то комманды в коде можно оформить в функции таким образом они могут пригодится и в следующих проектах, и всегда можно переместить в нужное место не теряя ни строчки, ни времени.
события лучше навешивать через addEventListener в некоторых случаях нужно не забывать их удалять через removeEventListener
глобальных событий (для всего окна) лучше избегать, в то же время делегирование событий может быть очень полезным.
если что-то повторяется можно подумать о том как этого избежать (например 2 диалоговых окна, 2 обработчика кнопок закрыть и т.п.)
в нейминге нужно избегать названий типа btn2 - оно ни о чем не говорит, его при необходимости будет сложно найти в серъезном проекте.
чтобы код был красивее лучше придерживаться кодстайла (любого).
ну и последнее: не ошибается тот кто ничего не делает :)

БЛОГ НА HUSL

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

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