Как получить маржу, чтобы быть относительно суммы текста css

Question

Я создаю выделенную область в своем блоге Wordpress, для этого мне пришлось использовать z-oindex и абсолютное позиционирование; для размещения текста над изображением. Однако с абсолютным позиционированием, когда мой текст превышает определенную величину, макет начинает прерываться. Есть ли способ условно изменить верхний край на основе длины текста? (Без использования JavaScript)

Вот мой jsfiddle: https://jsfiddle.net/7vkcLdmq/

#featured_home { 
 
    width: 960px; 
 
    height: 325px; 
 
} 
 

 
#featured_home a { 
 

 
    text-decoration: none; 
 

 
    color: white; 
 

 
} 
 

 
.sticky { 
 

 
    margin: 10px; 
 

 
} 
 

 
.desc { 
 

 
    overflow: hidden; 
 

 
    height: 265px; 
 

 
} 
 

 
.sticky img { 
 

 
    width: 120%; 
 

 
    height: auto; 
 

 
    z-index: -15; 
 

 
    position: relative; 
 

 
} 
 

 
.sticky h2 { 
 

 
    z-index: 10; 
 

 
    position: relative; 
 

 
    display: block; 
 

 
    max-width: 330px; 
 

 
} 
 

 
.sticky:nth-child(1) { 
 

 
    width: 490px; 
 

 
    height: 265px; 
 

 
    overflow: hidden; 
 

 
    float: left; 
 

 
    margin-left: 0px; 
 

 
} 
 

 
.sticky:nth-child(1) h2 { 
 

 
    color: white; 
 

 
    font-family:'Soho Gothic Pro', arial, sans-serif; 
 

 
    font-size: 22px; 
 

 
    padding: 10px; 
 

 
    background-color: rgba(218, 24, 114, 0.75); 
 

 
    z-index: 10; 
 

 
    position: absolute; 
 

 
    display: inline-block; 
 

 
    margin-top: 223px; 
 

 
    padding-right: 183px; 
 

 
    max-width: 298px; 
 

 
} 
 

 
.sticky:nth-child(2) { 
 

 
    width: 215px; 
 

 
    height: 122px; 
 

 
    overflow: hidden; 
 

 
    float: right; 
 

 
    margin-right: 0; 
 

 
} 
 

 
.sticky:nth-child(2):hover { 
 

 
    background-color: rgba(218, 24, 114, 0.75); 
 

 
    transition: all 0.5s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(2) h2 { 
 

 
    display: none; 
 

 
} 
 

 
.sticky:nth-child(2):hover h2 { 
 

 
    font-family:'Soho Gothic Pro', arial, sans-serif; 
 

 
    font-size: 20px; 
 

 
    line-height: 1.2em; 
 

 
    display: inline-block; 
 

 
    z-index: 10; 
 

 
    position: absolute; 
 

 
    max-width: 200px; 
 

 
    padding: 10px; 
 

 
    transition: all 0.5s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(3) { 
 

 
    width: 215px; 
 

 
    height: 122px; 
 

 
    overflow: hidden; 
 

 
    float: right; 
 

 
} 
 

 
.sticky:nth-child(3):hover { 
 

 
    background-color: rgba(104, 182, 109, 0.75); 
 

 
    transition: all 0.5s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(3) h2 { 
 

 
    display: none; 
 

 
} 
 

 
.sticky:nth-child(3):hover h2 { 
 

 
    font-family:'Soho Gothic Pro', arial, sans-serif; 
 

 
    font-size: 20px; 
 

 
    line-height: 1.2em; 
 

 
    display: inline-block; 
 

 
    z-index: 10; 
 

 
    position: absolute; 
 

 
    max-width: 200px; 
 

 
    padding: 10px; 
 

 
    transition: all 0.5s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(4) { 
 

 
    width: 215px; 
 

 
    height: 122px; 
 

 
    overflow: hidden; 
 

 
    float: right; 
 

 
    margin-right: 0; 
 

 
} 
 

 
.sticky:nth-child(4):hover { 
 

 
    background-color: rgba(254, 162, 63, 0.75); 
 

 
    transition: all 0.3s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(4) h2 { 
 

 
    display: none; 
 

 
} 
 

 
.sticky:nth-child(4):hover h2 { 
 

 
    font-family:'Soho Gothic Pro', arial, sans-serif; 
 

 
    font-size: 20px; 
 

 
    line-height: 1.2em; 
 

 
    display: inline-block; 
 

 
    z-index: 10; 
 

 
    position: absolute; 
 

 
    max-width: 200px; 
 

 
    padding: 10px; 
 

 
    transition: all 0.3s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(5) { 
 

 
    width: 215px; 
 

 
    height: 122px; 
 

 
    overflow: hidden; 
 

 
    float: right; 
 

 
} 
 

 
.sticky:nth-child(5):hover { 
 

 
    background-color: rgba(78, 181, 224, 0.75); 
 

 
    transition: all 0.3s ease-in-out; 
 

 
} 
 

 
.sticky:nth-child(5) h2 { 
 

 
    display: none; 
 

 
} 
 

 
.sticky:nth-child(5):hover h2 { 
 

 
    font-family:'Soho Gothic Pro', arial, sans-serif; 
 

 
    font-size: 20px; 
 

 
    line-height: 1.2em; 
 

 
    display: inline-block; 
 

 
    z-index: 10; 
 

 
    position: absolute; 
 

 
    max-width: 200px; 
 

 
    padding: 10px; 
 

 
    transition: all 0.3s ease-in-out; 
 

 
}

<div id="featured_home"> 
 
    <article class="sticky"> 
 
     <div class="desc"> 
 
      <div class="desc_over"> 
 
       <h2><a href="http://stylrs.com/ctf/2015/01/08/the-best-engineering-of-2014/">The best engineering of 2014</a></h2> 
 

 
      </div> 
 
      <img width="600" height="338" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/hand.jpeg" class="attachment-large wp-post-image" alt="hand"> 
 
     </div> 
 
    </article> 
 
    <article class="sticky"> 
 
     <div class="desc"> 
 
      <div class="desc_over"> 
 
       <h2><a href="http://stylrs.com/ctf/2014/12/11/girls-who-code-gender-parity-by-2020/">Girls who Code – gender parity by 2020</a></h2> 
 

 
      </div> 
 
      <img width="600" height="400" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/H1B8349-1280x853-1024x682-1024x682.jpg" class="attachment-large wp-post-image" alt="H1B8349-1280x853-1024x682"> 
 
     </div> 
 
    </article> 
 
    <article class="sticky"> 
 
     <div class="desc"> 
 
      <div class="desc_over"> 
 
       <h2><a href="http://stylrs.com/ctf/2014/12/10/nobel-prize-winners-grid-cell-dress/">Nobel Prize winner’s ‘Grid Cell’ dress</a></h2> 
 

 
      </div> 
 
      <img width="600" height="429" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/hubbble-2.jpg" class="attachment-large wp-post-image" alt="hubbble-2"> 
 
     </div> 
 
    </article> 
 
    <article class="sticky"> 
 
     <div class="desc"> 
 
      <div class="desc_over"> 
 
       <h2><a href="http://stylrs.com/ctf/2014/11/21/code2040-championing-diversity-in-tech/">Code2040 – championing diversity in tech</a></h2> 
 

 
      </div> 
 
      <img width="560" height="373" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/laura.jpg" class="attachment-large wp-post-image" alt="laura"> 
 
     </div> 
 
    </article> 
 
    <article class="sticky"> 
 
     <div class="desc"> 
 
      <div class="desc_over"> 
 
       <h2><a href="http://stylrs.com/ctf/2014/11/13/4d-printing/">4D Printing</a></h2> 
 

 
      </div> 
 
      <img width="600" height="338" src="http://stylrs.com/ctf/wp-content/uploads/2015/02/4dprint-1024x576-1024x576.jpg" class="attachment-large wp-post-image" alt="4dprint-1024x576"> 
 
     </div> 
 
    </article> 
 
</div>

есть другой способ, чтобы решить эту проблему?

Answer 1

Используйте bottom:0; для position:absolute вместо margin-top и это будет работать так, как вы ожидаете. Таким образом, текст будет расширяться снизу.

Дайте относительное положение родителя:

.desc { 
    position:relative; 
} 

Добавить в липком h1 следующий стиль:

.sticky:nth-child(1) h2 { 
    position: absolute; 
    botton:0; 
    margin: 0; 
} 

JsFiddle example