[英]Absolute position: I can't put my text at the bottom of my CSS3 slideshow
我知道可以通過使用絕對位置並添加“ bottom:0;”將文本放在塊的底部,但這對我來說是不可能的。 我嘗試了很長時間,但是不能。 我目前正在CSS3中制作幻燈片,我將4張圖片按絕對位置分組。
這是我的HTML代碼:
<h1 id="welcome-to">Welcome to! Web site for highly customized styles for the <a href="http://xenforo.com" target="_blank" style="border-bottom: 2px solid;">XenForo forum software</a>.</h1>
<h1 id="all-available-styles">All available styles</h1>
<div id="slideshow">
<div id="slideshow-container">
<div class="slideshow-content">
<img src="images/image-1.jpg" alt="Image 1">
<span>First Image</span>
</div>
<div class="slideshow-content">
<img src="images/image-2.jpg" alt="Image 2">
<span>Second Image</span>
</div>
<div class="slideshow-content">
<img src="images/image-3.jpg" alt="Image 3">
<span>Third Image</span>
</div>
<div class="slideshow-content">
<img src="images/image-4.jpg" alt="Image 4">
<span>Fourth Image</span>
</div>
</div>
</div>
和我的幻燈片CSS代碼:
#slideshow
{
text-align: center;
height: 440px;
}
#slideshow #slideshow-container
{
position: relative;
}
#slideshow #slideshow-container img
{
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
pointer-events: none;
}
#slideshow #slideshow-container span
{
position: absolute;
right: 0;
left: 0;
font-size: 15px;
}
我用一個跨度圍住我的文本並添加“ bottom:0;”。 至:
#slideshow #slideshow-container span
{
position: absolute;
right: 0;
left: 0;
bottom: 0;
font-size: 15px;
}
文本保留在頂部: http : //i.stack.imgur.com/SyzTL.png
請問我該怎么辦?
我認為這將為您工作。
#slideshow #slideshow-container {
position: static;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.