двигает картинку

Question

Вместе с <input> передвигается картинка при использовании margin. Как двигать только <input>?

#fullnameinput {
  height: 46px;
  width: 281px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 2px 2px 2px 2px;
  font-size: 13px;
  background-image: url(48.png);
  background-repeat: no-repeat;
  background-position: 4px;
  outline: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding-left: 20px;
  margin-top: 289px;
  margin-left: 306px;
  border: none;
  position: relative;
}

<header>
  <div id="logo1"><img src="888.png"></div>
  <nav>
    <div id="menu">
      <a class="menu__item" href="">HOME</a>
      <a class="menu__item" href="">SERVICE</a>
      <a class="menu__item" href="">ABOUT US</a>
      <a class="menu__item" href="">PRICING TABLE</a>
      <a class="menu__item" href="">HOW IT WORK</a>
      <a class="menu__item" href="">HAPPY CLIENTS</a>
      <a class="menu__item" href="">CONTACT US</a>
    </div>
  </nav>
</header>
<div id="banner12345">
  <p id="mainheader"><strong>BOOST UP YOUR LOCAL BUSINESS</strong></p>
  <p id="maintext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum typesetting.</p>
  <input placeholder="    Full Name" id="fullnameinput" type="text" name="Full Name">

  <img id="bannerpng" width="100%" src="20.png">

</div>

Answer 1

Вам необходимо картинку и input взять в отдельный блок и задать ему position: relative;, а для инпута position: absolute;

.input__img {
  position: relative;
}

#fullnameinput {
  position: absolute;
  top: 289px;
  left: 306px;
  height: 46px;
  width: 281px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 2px 2px 2px 2px;
  font-size: 13px;
  background-color: red;
  background-image: url(48.png);
  background-repeat: no-repeat;
  background-position: 4px;
  outline: none;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  padding-left: 20px;
  border: none;
}

<header>
  <div id="logo1"><img src="888.png"></div>
  <nav>
    <div id="menu">
      <a class="menu__item" href="">HOME</a>
      <a class="menu__item" href="">SERVICE</a>
      <a class="menu__item" href="">ABOUT US</a>
      <a class="menu__item" href="">PRICING TABLE</a>
      <a class="menu__item" href="">HOW IT WORK</a>
      <a class="menu__item" href="">HAPPY CLIENTS</a>
      <a class="menu__item" href="">CONTACT US</a>
    </div>
  </nav>
</header>
<div id="banner12345">
  <p id="mainheader"><strong>BOOST UP YOUR LOCAL BUSINESS</strong></p>
  <p id="maintext">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum typesetting.</p>

  <div class="input__img">
    <input placeholder="Full Name" id="fullnameinput" type="text" name="Full Name">
    <img id="bannerpng" width="100%" src="https://1poposobiyam.ru/wp-content/uploads/2016/01/family-2_ml-1-1.jpg">
  </div>

</div>

БЛОГ НА HUSL

двигает картинку

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