Question

我正试图在一个方框下面放一个带有句子的div，但不幸的是我无法在该方框下得到那个句子（div =“underbox”），它总是保持在顶部。我正在试图找出问题，但我找不到任何解决问题的好方法。

理想情况下，overbox也会隐藏“underbox”div，但首先我需要能够将它放在蓝色叠加层的底部，然后我会尝试将该悬停事件设置为正确隐藏该div。

有关如何做到这一点的想法吗？

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.box {  
    cursor: pointer;  
    height: 250px;   
    position: relative;  
    overflow: hidden;  
    width: 400px;
    font-family: 'Open Sans', sans-serif;
  
}  
  
 .box img {  
    position: absolute;  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  


.box .overbox {  
    background-color: #304562;  
    position: absolute;
    top:0;
    left:0;
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    opacity: 0;  
    width: 360px;  
    height: 200px;  
    padding: 130px 20px;
    
}  

.box:hover .overbox {  
    opacity: 1;
}

.box .overtext {
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
}


.box .title {
    font-size: 2.5em;
    text-transform: uppercase;
    opacity: 0;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
}

.box:hover .title, .box:focus .title {  
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}


.box .tagline {
    font-size: 0.8em;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
}

.box:hover .tagline, .box:focus .tagline {  
    opacity: 1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
}

.underbox
{
   position: relative;  
   float: bottom;
}

<div class="box">  
        <img src="http://files.room1design.com/oldcity.jpg"/>  
        <div class="overbox">
            <div class="title overtext">
                Walk This Way
            </div>
            <div class="tagline overtext">
                Follow the path of stone, a road towards an ancient past
            </div>

        </div>
    <div class="underbox"><b>THIS TEXT SHOULD BE UNDER THE BOX</b></div>
    </div>

Answer 1

http://jsfiddle.net/gwes9ye7/1/

您可以在课程top:250px上使用overbox。

此外，将父类box高度增加到280px。

enter image description here

Answer 2

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.box {  
    cursor: pointer;  
    height: 250px;   
    position: relative;    
    width: 400px;
    font-family: 'Open Sans', sans-serif;

}  

 .box img {  
    left: 0;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
}  


.box .overbox {  
    background-color: #304562;  
    position: absolute;
    top:0;
    left:0;
    color: #fff;  
    z-index: 100;  
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    opacity: 0;  
    width: 360px;  
    height: 200px;  
    padding: 26px 20px;

}  

.box:hover .overbox {  
    opacity: 1;
}

.box .overtext {
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;
    transform: translateY(40px);
    -webkit-transform: translateY(40px);
}


.box .title {
    font-size: 2.5em;
    text-transform: uppercase;
    opacity: 0;
    transition-delay: 0.1s;
    transition-duration: 0.2s;
}

.box:hover .title, .box:focus .title {  
    opacity: 1;
    transform: translateY(0px);
    -webkit-transform: translateY(0px);
}


.box .tagline {
    font-size: 0.8em;
    opacity: 0;
    transition-delay: 0.2s;
    transition-duration: 0.2s;
}

.box:hover .tagline, .box:focus .tagline {  
    opacity: 1;
    transform: translateX(0px);
    -webkit-transform: translateX(0px);
}

.underbox
{
   position: relative;  
   float: bottom;
}
</style>
</head>
<body>
<div class="box">  
        <img src="http://files.room1design.com/oldcity.jpg"/>  
        <div class="overbox">
            <div class="title overtext">
                Walk This Way
            </div>
            <div class="tagline overtext">
                Follow the path of stone, a road towards an ancient past
            </div>

        </div>
    <div class="underbox"><b>THIS TEXT SHOULD BE UNDER THE BOX</b></div>
    </div>
</body>
</html>

Div定位在另一个div下

2 个答案: