Поместите div над другим и сделайте div в нижней части

Я хотел бы иметь историю div внизу рисунка (mainMedia), но я также хочу, чтобы div был на фотографии.Поместите div над другим и сделайте div в нижней части

Когда я пытаюсь сделать это, история div подходит к вершине, потому что погружение mainMedia - это положение: абсолютное, но я должен держать его таким, чтобы поддерживать погружение поверх него ... любые идеи?

Не могли бы вы помочь?

Большое спасибо!

HTML

<html> 
<head> 
    <title> Beta</title> 
    <!-- css links --> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
</head> 
<body> 
    <div class="gigantic"> 
     <div class="main"> 
      <div class="twitterProfilePicture"> 
       <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png"> 
      </div> 
      <div class="push"> 
       <div class="mainMedia"> 
        <img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"> 
        <div class="about"> 
         <p><span>Mashable</span></br>3 Hours ago</p> 
        </div> 
       </div> 
      </div> 
      <div class="Story"> 
       <div class="heading"> 

       </div> 
       <div class="text"> 

       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS

body 
{ 
    margin: 0; 
    background-color: rgb(233,234,237); 
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; 
} 

p 
{ 
    margin: 0; 
} 

.gigantic 
{ 
    width: 800px; 
    height: 100%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top: 20px; 
    margin-top: 40px; 
    /*background-color: #fff;*/ 
} 

.main 
{ 
    width: 700px; 
    height: 400px; 
    /*background-color: #000;*/ 
    margin-right: auto; 
    margin-left: auto; 
    padding: 30px; 
} 

.twitterProfilePicture 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.twitterProfilePicture img 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.mainMedia 
{ 
    width: 630px; 
    height: auto; 
    /*background-color: #fff;*/ 
    float: right; 
    border-radius: 4px; 
    position: relative; 
    margin-bottom: 10px; 
} 

.mainMedia img 
{ 
    width: 630px; 
    height: auto; 
    position: relative; 
    border-top-left-radius: 3px;  
    border-top-right-radius: 3px; 
} 

.about 
{ 
    position: absolute; 
    /*background-color: #000;*/ 
    overflow: hidden; 
    height: 35px; 
    position: absolute; 
    top: 7px; 
    left: 7px; 
    font-size: 12px; 
    color: rgb(94,118,171); 
} 

.about span 
{ 
    color: #385874; 
    font-size: 16px; 
} 

.story 
{ 
    width: 630px; 
    height: 300px; 
    background-color: #fff; 
    position: absolute; 
    margin-left: 70px; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    position: static; 
    bottom: 0; 
}

источник

2013-03-08 user1754324

Вот мой взгляд на то, что вы пытаетесь достичь:

я положил fiddle here для вас.

Что вам нужно сделать, это вставить историю div в div mainMedia. У вас также есть ваш css, ссылающийся на «.story», когда это должно было быть «.Story».

HTML:

<div class="gigantic"> 
     <div class="main"> 
      <div class="twitterProfilePicture"> 
       <img src="https://si0.twimg.com/profile_images/2015016150/petecashmoreavatar_normal.png"> 
      </div> 

    <div class="push"> 
       <div class="mainMedia"> 
         <img src="http://blog.sunsafaris.com/wp-content/uploads/2013/02/dune-king-lion.jpg"/> 
        <div class="about"> 
          <p><span>Mashable</span></br>3 Hours ago</p> 
        </div> 

      <div class="Story"> 
         <div class="heading">Heading</div> 
         <div class="text">Text Story here</div> 
        </div> 

     </div> 
      </div> 

     </div> 
    </div>

CSS:

body 
{ 
    margin: 0; 
    background-color: rgb(233,234,237); 
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif; 
} 

p 
{ 
    margin: 0; 
} 

.gigantic 
{ 
    width: 800px; 
    height: 100%; 
    margin-right: auto; 
    margin-left: auto; 
    padding-top: 20px; 
    margin-top: 40px; 
    /*background-color: #fff;*/ 
} 

.main 
{ 
    width: 700px; 
    height: 400px; 
    /*background-color: #000;*/ 
    margin-right: auto; 
    margin-left: auto; 
    padding: 30px; 
} 

.twitterProfilePicture 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.twitterProfilePicture img 
{ 
    width: 55px; 
    height: 55px; 
    border-radius: 3px; 
    /*background-color: #fff;*/ 
    position: relative; 
    float: left; 
} 

.mainMedia 
{ 
    width: 630px; 
    height: auto; 
    /*background-color: #fff;*/ 
    float: right; 
    border-radius: 4px; 
    position: relative; 
    margin-bottom: 10px; 
} 

.mainMedia img 
{ 
    width: 630px; 
    height: auto; 
    position: relative; 
    border-top-left-radius: 3px;  
    border-top-right-radius: 3px; 
} 

.about 
{ 
    position: absolute; 
    /*background-color: #000;*/ 
    overflow: hidden; 
    height: 35px; 
    position: absolute; 
    top: 7px; 
    left: 7px; 
    font-size: 12px; 
    color: rgb(94,118,171); 
} 

.about span 
{ 
    color: #385874; 
    font-size: 16px; 
} 

.Story 
{ 
    background-color: black; 
    opacity:0.5; 
    position: absolute; 
    border-bottom-left-radius: 3px; 
    border-bottom-right-radius: 3px; 
    position: absolute; 
    bottom: 3px; 
    color:white; 
    width:630px; /*I made this the same as your mainMedia*/ 
}

Я надеюсь, что помогает.

источник

2013-03-08 23:34:41 Tony

Поместите div над другим и сделайте div в нижней части

ответ

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