html - 来自同一 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:absolute 和 z-index 时会发生这种情况。您必须在媒体查询中为每个分辨率更改此设置。