Почему input внизу и как это исправить?

Question

.bar {
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  width: 50%;
  height: 50px;
  position: fixed;
  top: 50%;
  left: 25%;
}

input {
  border: hidden;
  width: 90%;
  height: 48px;
  font-size: 20px;
  outline: none;
  margin-left: 40px;
  vertical-align: top;
}

.bar:hover {
  box-shadow: 1px 1px 8px 1px #dcdcdc;
}

svg {
  position: relative;
  padding: -100px -100px;
  margin: 12px
}

<body>
  <div class="bar">
    <svg focusable="false">
            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
        </svg>
    <input type="text" style="border:none;">
  </div>
</body>

Answer 1

У Вас <svg> имеет высоту в 150px и находиться в одном потоке с <input>. Именно <svg> и отталкивает <input> вниз. Нужно <svg> задать position: absolute;.

.bar {
  border: 1px solid #dcdcdc;
  border-radius: 100px;
  width: 50%;
  height: 50px;
  position: fixed;
  top: 50%;
  left: 25%;
  overflow: hidden;
  position: relative;
}

input {
  border: hidden;
  width: 90%;
  height: 48px;
  font-size: 20px;
  outline: none;
  margin-left: 40px;
  vertical-align: top;
}

.bar:hover { box-shadow: 1px 1px 8px 1px #dcdcdc; }

svg {
  position: absolute;
  z-index: -1;
  padding: -100px -100px;
  margin: 12px
}

<body>
  <div class="bar">
    <svg focusable="false">
            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
        </svg>
    <input type="text" style="border:none;">
  </div>
</body>

БЛОГ НА HUSL

Почему input внизу и как это исправить?

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