来自同一div的元素在调整大小时重叠

Question

自从3天以来，我从头部得到了2个元素的问题，并且无法修复它。问题是，我的"搜索触发器"，这是我的搜索图标和"平板图标"，这是图标，只显示在给定的浏览器宽度，重叠。当浏览器的宽度很小的时候，甚至搜索图标也超越了平板电脑图标。我在两个元素上尝试了Float:right,left和position:absolue,relative, overflow:auto在站点标题上，margin:left,right在元素上，display:block, display:inline-block;在两个元素上显示属性都不起作用……我不知道问题出在哪里。

/***********************************************
                  Header Style
************************************************/
.admin-bar .site-header {
  top: 32px;
}
.admin-bar .site-header.is-fixed {
  top: -47px;
}
@media screen and (min-width:640px) and (max-width:790px){
.admin-bar .site-header.is-fixed{
top :-44px;
}
}
@media screen and (min-width:413px) and (max-width:783px){
.admin-bar .site-header{
top: 35px;
}
}
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  height: 80px;
  z-index: 4;
  border-bottom: 1px solid #eee;
}
/***********************************************
             Search menu style
************************************************/
 .search-trigger {
  position: absolute;
  right:0.5em;
  top: 30px;
  width: 40px;
  text-align: center;
  cursor:pointer;
  cursor:hand;
  display:inline-block;
}
@media screen and (min-width: 40em) {
  .search-trigger {
    right: 0.8em;
  }
}
@media screen and (min-width:783px){
.search-trigger{
top:26px;
}
}
.search-trigger:before {
  width: 100%;
  display: block;
  font-family: "ElegantIcons";
  font-weight: normal;
  text-align: center;
  content: "55"; 
/***********************************************
                  Icon Style
************************************************/
 .tablet-icon{
  position: absolute;
  display:inline-block;
  left:90%;
  top: 23px;
  width: 40px;
  float:right;
}
.tablet-icon:before{
  width: 100%;
  font-size:1.6em;
  font-family: "ElegantIcons";
  font-weight: bold;
  text-align: center;
  content: "61";
}
  

<header id="masthead" class="site-header" role="banner">  
<span class="tablet-icon"></span>
<a id="search-trigger" class="search-trigger"></a>
</header>

Answer 1

当您使用position:fixed, position:absolut和z-index时，就会发生这种情况。

Answer 2

当我有调整大小的问题时，我用%替换尽可能多的px大小。这样当屏幕调整大小时，元素也会按比例调整大小。也就是把50px改成5%

Answer 3

我将"元素内部元素的位置设置为相对位置和float:right;位置，并将<header>的位置设置为绝对位置，效果非常好