Div позиционирование под другим div

-1

Я пытаюсь разместить div с предложением под коробкой, но, к сожалению, я не могу получить это предложение (div = "underbox") под этим полем, оно всегда остается на Вверх. Я пытаюсь выяснить проблему, но я не могу найти подходящего решения для ее устранения.Div позиционирование под другим 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/

Вы можете использовать top:250px на классе overbox.

Также увеличьте родительский класс 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

ответ

Смежные вопросы