如何用CSS解决绝对定位hover显示div的背景透明及父元素高度问题

嘿，这个问题其实很好解决！咱们一步步来拆解：

首先，你说设置position:absolute时div背景透明，这大概率是因为你没给#message设置背景颜色——绝对定位本身不会让背景变透明，只是默认背景是透明的而已。只要给它加个background-color就能遮挡下方内容啦。

然后，关于父div高度受影响的问题：当用position:relative时，元素是在正常文档流里的，所以显示时会撑开父元素的高度；而position:absolute是脱离文档流的，不会影响父元素的布局，这正是你需要的效果。不过要注意，绝对定位的元素是相对于最近的已定位祖先元素（也就是设置了position:relative/absolute/fixed的父元素）来定位的，所以你得给父元素（也就是#hover对应的元素）加个position:relative，不然#message会相对于整个页面定位，位置可能会跑偏。

接下来给你修改后的完整代码示例：

HTML结构（假设你的结构是这样） #

<div id="hover">鼠标悬停这里触发提示</div>
<div id="message">这是需要显示的提示内容</div>

JavaScript（你的原有代码可以保留，没问题） #

$(document).ready( function() { 
  $("#hover").hover(function() { 
    $("#message").toggle(); 
  }); 
});

调整后的CSS代码 #

/* 给父元素添加相对定位，作为子元素的定位上下文 */
#hover {
  position: relative;
  /* 这里可以添加你需要的其他样式，比如宽度、内边距等 */
  padding: 8px;
  border: 1px solid #ccc;
}

#message {
  border: 1px solid;
  padding: 10px;
  box-shadow: 5px 10px #888888;
  position: absolute;
  display: none;
  /* 关键：设置不透明背景色，直接遮挡下方内容 */
  background-color: #ffffff;
  /* 定位到父元素的正下方，可根据需求调整 */
  top: 100%;
  left: 0;
  /* 可选：如果有层级重叠问题，设置z-index确保提示框在最上层 */
  z-index: 10;
  /* 可选：给提示框加个宽度，避免内容太宽 */
  width: 200px;
}

关键说明：

• #hover添加position:relative：让#message的绝对定位以它为基准，不会出现位置偏移的问题。
• #message设置background-color:#ffffff：这是解决背景透明的核心，你也可以换成其他你需要的纯色或半透明色（比如rgba(255,255,255,0.9)）。
• top:100%和left:0：控制提示框的位置，刚好显示在父元素的下方，你可以根据需求修改数值调整位置。
• z-index:10：如果页面中有其他元素和提示框重叠，这个属性可以确保提示框显示在最上层，不会被其他内容遮挡。

这样调整后，既不会让父元素的高度受到影响，又能让提示框有不透明背景遮挡下方内容啦！

内容的提问来源于stack exchange，提问作者Avinash Kumar