移动搜索按钮时-它不会相对于浏览器宽度保持其位置

Question

我正在使用以下html代码：

<div class="tt-desktop-header">    

    <div class="container-fluid">
      <div class="tt-header-holder">

        <div class="tt-obj-logo obj-aligment-center" itemscope="" itemtype="http://schema.org/Organization"><a href="/" class="tt-logo" itemprop="url"><img src="//cdn.shopify.com/s/files/1/0086/7804/7795/files/vvvvvvvv_160x.png?v=1559873506" srcset="//cdn.shopify.com/s/files/1/0086/7804/7795/files/vvvvvvvv_160x.png?v=1559873506 1x, //cdn.shopify.com/s/files/1/0086/7804/7795/files/vvvvvvvv_320x.png?v=1559873506 2x" alt="" class="tt-retina" itemprop="logo" style="top:15px"></a></div><div class="tt-obj-options obj-move-right tt-position-absolute"><div class="tt-parent-box tt-desctop-parent-headtype1">
  <div class="tt-search-opened-headtype1">
    <form action="/search" method="get" role="search">
      <button type="submit" class="tt-btn-search">
        <i class="icon-f-85"></i>
      </button>
      <input class="tt-search-input" type="search" name="q" placeholder="SEARCH PRODUCTS..." autocomplete="off">
      <input type="hidden" name="type" value="product">
    <div class="search-results" style="display: none;"></div></form>
  </div>
</div><!-- tt-search -->
<div class="tt-desctop-parent-search tt-parent-box serchisopen">
  
</div>
<!-- /tt-search --><!-- tt-cart -->
<div class="tt-desctop-parent-cart tt-parent-box">
  
</div>
<!-- /tt-cart --><!-- tt-account -->
<div class="tt-desctop-parent-account tt-parent-box">
  
</div>
<!-- /tt-account --><!-- tt-langue and tt-currency -->
<div class="tt-desctop-parent-multi tt-parent-box">
  

致电此搜索表：

.tt-desktop-header .tt-search-opened-headtype1{
	padding-top: 8px;
	padding-bottom: 7px;
}
.tt-desktop-header .tt-desctop-parent-headtype1:not(:last-child){
	margin-right: 9px;
}
header:not(.small-header) .tt-search-opened-headtype1{
  margin-top: 10px; 
}


.tt-search-opened-headtype1 form{
  display: block;
  position: relative;
}
.tt-search-opened-headtype1 .tt-search-input {
  border: 1px solid #e9e7e7;
  outline: 0;
  padding: 6px 10px 4px 34px;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: #777777;
  background: #f7f8fa;
  outline: none;
  width: 240px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.tt-search-opened-headtype1 .tt-btn-search{
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  border: none;
  outline: none;
  width: 32px;
  height: 34px;
  font-size: 21px;
  line-height: 1;
  z-index: 2;
  cursor: pointer;
  color: #2879fe;
  transition: color 0.2s linear;
  -ms-transition: color 0.2s linear;
  -webkit-transition: color 0.2s linear;
  -o-transition: color 0.2s linear;
}

但是，如果我尝试将其移到最左侧，则可以，但是如果我将浏览器缩小，则它就消失了。我尝试使用绝对位置和相对位置，但是仍然发生相同的情况。任何人都可以看一下代码，看看我在做什么错吗？现在，它位于最右边的右上角位置。

我尝试添加“ left：1700px”，但显然这不是正确的方法。