Bymas | Проблема со стилем <button>

Здравствуйте, есть проблема связанная с кнопкой отправки <button> Дело в том что он ставит себя поверх всех объектов, тем самым он мешает, нет, он пи@дец как мешает мне нормально кодить по дизайну. Эта скатина даже модальное окно посылает нах#р. Вот код кнопки: html

html

   <input id="description" contenteditable="true" name="msg"  placeholder="Сообщение"> <button name="add" /><i class="fa fa-lg fa-paper-plane fa-fw"></i></button>

CSS

css

   button { background-color: white; color: black; height: 40px; background: #DCDCDC; position: absolute; border: none; outline: none; -moz-appearance: none; resize: none; overflow: auto; }

Хочу заметить, что эта уродка в буквальном смысле ставит себя поверх всех объектов

При наличии свойства "position: absolute;" и отсутствия указания позиции, возникает вопрос, почему указно именно "absolute"?
И зачем вообще задавалось свойство "position"?
________
посл. ред. 28.07.2020 в 22:12; всего 1 раз(а); by Simptom333

Simptom333 (28.07.2020 в 22:11)
При наличии свойства "position: absolute;" и отсутствия указания позиции, возникает вопрос, почему указно именно "absolute"?
И зачем вообще задавалось свойство "position"?

<button> съезжает вниз от <input>
position с условием absolute это как фундамент для здания. С абсолютом буттон ставится рядом с инпатом.

540447140 , Имеются "float: left;" и "display: inline-block;".
Дабы ничего никуда не уехало, задаётся ширина, при необходимости. Так сказать, дабы наверняка.
Если же имеются сомнения в верности отображения браузером, можно прибегнуть к дополнительному свойству в виде "margin-right: ...;".
Задавать position, в данном случае, не несёт смысла.
К тому же, при указании absolute, необходимо дополнительно задавать положение. К примеру "top: 0; left: 0;".
Да и "фундаментом" выступает "position: relative;", в котором уже размещаются элементы с absolute.
Рекомендую пересмотреть приоритеты, отойти от указания position в форме и использовать более "гуманные", если так можно вообще выразится, свойства.
Но, коль считаешь, что указание position более подходящий вариант, тебе необходимо учитывать отступы и размещения всех рядом стоящих блоков.
Более подробно дать ответ не возможно, так как нет скрина, на котором было бы видно на какие блоки и что залазит. Ну и плюс к скринам исходник не помешал бы.
Так что, делай выводы.

Да, и в <button> не нужно ставить "/".
То есть "<button name="add" />" - не верно. Ибо имеется закрывающая часть, если более понятным языком.