Question

我的标题中有2个元素从3天开始出现问题，无法解决问题。问题在于我的搜索触发器＆＃34;这是我的搜索图标和＆＃34;平板电脑图标＆＃34;这是仅在给定的浏览器宽度上显示的图标，是重叠的。当浏览器的宽度非常小时，即使搜索图标超出了平板电脑图标。我尝试在Float:right,left和position:absolue,relative两个元素上overflow:auto 1}}在网站标题上，margin:left,right关于元素和显示两个元素的属性display:block，display:inline-block;没有任何作用...我不知道问题出在哪里.. < / p>

＆＃13;

/***********************************************
                  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";
}

＆＃13;

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

＆＃13;

Answer 1

使用position：fixed，position：absolut和z-index时会发生这种情况。您必须在每个分辨率的媒体查询中更改此内容。

Answer 2

当我调整问题大小时，我用％替换尽可能多的px sizings。这样，当屏幕调整大小时，元素按比例调整大小。即改变50px的东西，5％

Answer 3

好吧，我在我的元素中将位置设置为“”元素到相对和float:right;，并将<header>的位置保留为绝对值，它就像魔术一样。

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

3 个答案: