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

Question

3天以来，我的标题中有2个元素有问题，无法修复的问题是我的“搜索触发器”是我的搜索图标，而“it.The - icon”是只在给定浏览器宽度上显示的图标，当浏览器的宽度非常小时，overlapping.Even搜索图标是否超出了tablet图标。我尝试在这两个元素上使用Float:right,left和position:absolue,relative，在站点标题上使用overflow:auto，在元素上使用margin:left,right，在两个元素上使用显示属性display:block，display:inline-block; Nothing works...我不知道问题出在哪里。

​

/***********************************************
                  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大小。这样，当屏幕调整大小时，元素也会按比例调整大小。例如，用5%的像素改变50px的内容

Answer 3

我将"“元素内的元素的位置设置为relative和float:right;，并将<header>的位置设置为absolute，它就像魔术一样工作。