Question

美好的一天。

请考虑下一个简单的代码：

                <div className="box-and-clock">
                    
                        {isBoxShown && (
                            <div className="box">
                                {value}
                            </div>
                        )}
                        
                        <img
                            onMouseOver={() => setIsBoxShown(true)}
                            onMouseOut={() => setIsBoxShown(false)}
                            src={clockIcon}/>
                </div>

所以我有以下布局（我剪掉了一些多余的数据）

当用户指向时钟图标时，他会看到一些数据。问题是当黑框中有更多数据时，箭头（由伪元素完成）不再指向时钟图标。像这样

我需要让黑盒在时钟图标的特定位置上，而不依赖于它的高度。

我试过 display: table 到父 div 和 display: table-cell 到孩子，但没有运气。有什么建议吗？

我的 css

.box {
    width: 200px;
    min-height: 130px;
    height: auto;
    background: black;
    border-radius: 2px;
    position: absolute;
    top: 320px;
    right: 228px;
}

.box-and-clock {
display: flex;
flex-direction: column;
}

Answer 1

您可以使用 css position: relative; 设置父元素以让子元素标识其位置，因此子元素可以使用 position: absolute; 相对于其父元素的位置放置自己。


.box {
  width: 200px;
  min-height: 130px;
  /* height: auto; */
  background: black;
  border-radius: 2px;
  /* top: 320px; */
  /* right: 228px; */

  position: absolute;
  top: 0px;
  transform: translateY(-100%); /* offset element */
}

.box-and-clock {
  display: flex;
  flex-direction: column;

  position: relative; /* you need this! */
}

ps，更详细的css位置概念，可以关键字搜索：css position property

使用 css 根据其高度固定 div 位置

1 个答案: