【问题标题】:Not being able to click a link next to a fixed div.无法单击固定 div 旁边的链接。
【发布时间】:2010-07-08 13:54:45
【问题描述】:

编辑:问题解决了。我不敢相信我一开始就没有想到这一点。 解决方案:

#message-box{position:fixed;bottom: 29px;left:0px;width: 400px;}

---- 原文:

嗨,

图片如下: http://i242.photobucket.com/albums/ff198/Warz/divchatproblemmodified.png

(它说 id=footer 在那里,但它应该说 id=footerbar。此外,最底部的栏(您输入消息的地方,带有名为 "statusbar" 的 id )应该覆盖 width: 100%;,因为它已经这样做了.)

我正在尝试在我的网站上创建一个带有聊天功能的底部栏。聊天大小应该可以调整大小(改变高度)。如您所见,我在聊天上方放置了一个 div (msg-top),这意味着,当调整聊天大小时,msg-top 也应该被移动。

如果您查看下图,您会发现问题所在。 <div id="footerbar"> 具有以下设置,因此覆盖了整个区域:

#footerbar {position: fixed;bottom: 0px;left: 0px;right: 0px;}

所有 div 都是#footerbar 的子级。

因此,如果我将聊天框的高度调整为 100%,则无法点击任何链接。即使像图片这样的高度,聊天框右侧的所有链接都无法点击...

我能做些什么来解决这个问题?

谢谢!

其他 div:

/* background opacity */
#opacity-me,#msg-top,#msg-messages,#statusbar {
  background: black;
  color: white; 
  border-top: dotted 1px white;
  opacity: .90;    
  filter: alpha(opacity="90");
  z-index: 200;
  overflow: hidden;
  overflow-y: auto;
}
#statusbar {
  position: relative;
}
#message-box{
  position:relative; 
  width: 400px;
}
#msg-top {
  overflow: hidden;
  border: 0px;
  border: dotted 1px white;
}
#msg-messages {
  padding-left: 4px;    
  padding-right: 4px;    
  height: 100px;    
  border: 0px;
}

【问题讨论】:

    标签: css html hyperlink fixed


    【解决方案1】:

    该元素位于另一个元素下方,因此您无法单击链接,该链接仍在工作...只需在页脚栏上使用 z-index 或尝试更改页脚栏位置...

    【讨论】:

      【解决方案2】:

      给 div id=footer 一个高度,比如:

      #footerbar {position: fixed;bottom: 0px;left: 0px;right: 0px; height:30px;}
      

      这应该可以解决它,只需相应地调整高度。让我知道这个是否奏效。

      【讨论】:

      • 这不起作用,因为如果我将高度设置为例如 30 像素,则聊天 + 栏 + 消息顶部的总和不能超过 30 像素。好像都被挤出了屏幕。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多