Question

这篇文章有两个目标;一个有一个工具提示div向下滑动，好像它在父母的顶部“下面”，其次，理想情况下，无论工具尖端的高度如何都要工作 - 即工具尖端的底部总是排成一行父div的上边缘。

html如下：

<div class="container1">
    state 1<br>this is the main content
    <div id="i1" class="tooltip">this is the tool section</div>
</div>
<div class="container1">
    state 2<br>this is the main content
    <div id="i2" class="tooltip">this is the tool section slid down</div>
</div>

和css如下：

body{
    font-family:Arial;
}
.container1{
    box-sizing:border-box;
    border:1px solid black;
    width:450px;
    min-height:300px;
    position:relative;
    padding:10px;
    margin:25px auto;
}
.tooltip{
    position:absolute;
    box-sizing:border-box;
    right:50px;
    width:150px;
    height:100px;
    border:1px solid gray;
    padding:10px;
}
#i1{
    top:-100px;
}
#i2{
    top:0px;
}

Answer 1

我找到了一个解决方案，使用overflow：hidden非常简单。可能溢出-y会更好，因此宽元素仍会导致滚动条。

http://jsfiddle.net/sfullman/y1on62pd/1/

如果工具尖端div具有不确定的高度，仍然存在一个问题，即如何将刀尖div的BOTTOM边缘与父级的TOP边缘对齐。我在这里发布了CSS，因为它与我原来的最相关和不同：

body{
    font-family:Arial;
}
.container1{
    box-sizing:border-box;
    border:1px solid black;
    width:450px;
    min-height:300px;
    position:relative;
    z-index:2;
    overflow:hidden;
    padding:10px;
    margin:25px auto;
}
.tooltip{
    position:absolute;
    z-index:1;
    box-sizing:border-box;
    right:50px;
    width:150px;
    height:100px;
    border:1px solid gray;
    padding:10px;
    background-color:rgba(255,255,255,0.75);
}
#i1{
    top:-100px;
}
#i2{
    top:0px;
}

Answer 2

您将要使用CSS过渡。

-moz-transition: all 0.2s ease-out;  
-o-transition: all 0.2s ease-out; 
-webkit-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;

我还添加了一个工具提示容器类来处理您的样式，并允许工具提示的高度为0。

这应该适合你： http://jsfiddle.net/3z3s7tLf/

将div垂直向下滑入视图

2 个答案: