Div在另一個div下定位

-1

我試圖在一個盒子下面放置一個句子，但不幸的是，我無法在該框下面獲得該句子（div =「underbox」），它始終停留在最佳。我試圖找出問題所在，但找不到解決問題的好方法。Div在另一個div下定位

理想情況下，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>

來源

2015-06-07 Filipe Santos

尚不清楚你想要什麼？ – divy3993

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

您可以在類overbox使用top:250px。

另外，將父類box高度增加到280px。

enter image description here

來源

2015-06-07 02:53:43

<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>

來源

2015-06-07 03:23:16

Div在另一個div下定位

回答

相關問題