0
我在我的WordPress博客中创建了一个精选区域，为此我不得不使用z-oindex和绝对定位;将文本放置在图像上。但是，只要我的文本超过一定数量，绝对定位就会开始打破布局。有没有一种方法可以根据文本的长度有条件地更改顶部边距？ （不使用JavaScript）如何获得保证金相对于文本的数量css
这里是我的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>有另一种方式来解决问题？
也许你想 “锚” 文本的底部，而不是调整顶部边距。试试这个：https://jsfiddle.net/4h114s2q/ – Neps 2015-03-30 20:47:15