0

何らかの理由で、www.hungryrunnergirl.com の左側のサイドバーの上部にあるソーシャル メディア アイコンが原因で、すぐ下のアーカイブ ウィジェットがクリックできなくなります。各ボタンの位置を絶対的に (コンテナーは相対的なまま) にすると、この問題は発生しませんが、そうすると、表示しているブラウザーに応じてボタンが異なる場所に表示されます。なぜこれが起こっているのかについての洞察はありますか(絶対CSSポジショニングを使用するときの一貫性のないポジショニングまたはクリックできない領域のいずれか)?

メニューのスタイルを設定するために現在使用しているコードは次のとおりです。

/* Menu Container */
.custom .sidebar .menu {
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  width: 190px;
  height: 190px;
  position: relative;
}
/* Facebook */
.custom #menu-item-15470 a {
    display:block;
height:81px;
width:80px;
padding:0px;
margin-left:0px;
position: relative;
left: 0px;
top: 0px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px 0px;
}
.custom #menu-item-15470 a:hover { 
    background-position:0px 0; 
}
/* Pinterest */
.custom #menu-item-15471 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
position: relative;
left: 81px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -82px;
}
.custom #menu-item-15471 a:hover { 
    background-position:0px -82px; 
}
/* Instagram */
.custom #menu-item-15472 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-top:10px;
position: relative;
left: 0px;
top: -81px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -165px;
}
.custom #menu-item-15472 a:hover { 
background-position:0px -165px; 
}
/* Twitter */
.custom #menu-item-15475 a {
display:block;
height:81px;
width:80px;
padding:0px;
margin-left:10px;
margin-top:10px;
position: relative;
left: 81px;
top: -172px;
outline:none;
text-indent:-9999px;
background-image:url("http://www.hungryrunnergirl.com/wp-content/uploads/2013/01/Social_Sprite.png"); background-position:-83px -248px;
}
.custom #menu-item-15475 a:hover { 
background-position:0px -248px; 
}

手伝ってくれてどうもありがとう。

4

1 に答える 1

1

li.widget以下を（191行目）に追加します。

position: relative;
z-index: 100;
于 2013-01-08T21:57:39.700 に答える