html - 使同级 div 不要将其兄弟推到左边太远

Question

我想在用户将鼠标悬停在按钮上时显示顶部提示。工具提示是一个出现在正确位置的 div。

然而，一旦上传文件，<div>文件信息出现在，推送 < div>工具提示的方式在右边。

工具提示的 CSS

.expl {
padding-top: 11px !important;
border-radius: 3px;
color: whitesmoke;
background-color: cornflowerblue;
padding: 7px 9px 5px 9px;
display: none;
float: left;
position: relative !important;
top: 13px;
right: -17px;
display: none;
height: 35px;
-webkit-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.35);
}

对于左侧的相邻 DIV

text-align: center;
float: left;
display: inline-block;

有没有办法让这个工具提示 div 始终显示在按钮旁边，这样它就位于容器上方，而不是被它推开？

谢谢

Answer 1

我个人会使用单独的包装器 <div>对于上传按钮并将该包装器设置为 position: relative;并将工具提示放入该包装器中并使用 position: absolute;除非您有意让工具提示影响页面的流动。