Question

其实我的应答部分是在我的形象下，还是我想叠加它们？

＆＃13;

#demo {
    margin: 0;
    max-width: 350px;
    text-align:center;
}
h2 {
    margin: 0px;
    padding:0px;
}
section {
    border:1px solid #eee;
    padding: 20px;
    margin-top:-370px;
}
.credit {
    margin-top:0px;
}

＆＃13;

<img src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
    <article>     
        <h2>Untamed Opulence</h2>
        <div class="credit">
            <hr style=" width:30px; margin:30px auto 15px auto">
            <p>Exclusive&nbsp;&nbsp;/&nbsp;&nbsp;July 15, 2015
                <br/>Serafima by Edwin S Freyer</p>
        </div>
    </article>
</section>

＆＃13;

我该怎么办？这是我的jsfiddle：www.jsfiddle.net/kodjoe/ys484rpw/

Answer 1

我已经为您的图像提供了一个类，并将图像和演示部分设置为绝对位置，底部为0

$('article').readmore({speed: 500});

#demo { margin: 0; max-width: 350px; text-align:center;}
h2 { margin: 0px; padding:0px;}
section { border:1px solid #eee; padding:20px!important;}
.credit { margin-top:0px; }

.abs, #demo {position:absolute; bottom:0;  max-width:350px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://www.500milligrammes.com/facticemagazine/final/addon/news/readmore.js"></script>
<img class="abs" src="http://www.500milligrammes.com/facticemagazine/final/news/obsession/img/1.jpg" alt="">
<section id="demo">
<article>

<h2>Untamed Opulence</h2>
<div class="credit">
<hr style=" width:30px; margin:30px auto 0px auto">
<p>Exclusive&nbsp;&nbsp;/&nbsp;&nbsp;July 15, 2015<br/>
Serafima by Edwin S Freyer</p>
</div>

</article>
</section>

Answer 2

我认为你应该看＆＃34; z-index＆＃34;我认为如果你将一个div中的所有元素四舍五入并添加位置：绝对值＆＃39;。对不起我的英语我是初学者。

如何叠加图像上的文字

2 个答案: