html - 向已包含内容的 div 添加标题

Question

我有一个 200 像素乘 200 像素的小 slider 。然而，我真正喜欢的是在右上角有一个 100px x 20px 的标题框，带有彩色背景和一个单词。问题是，因为我已经在框( slider )中有内容，所以如果我尝试添加标题 div，它不会位于现有内容的顶部，而是将 200px 的大小扭曲 200px div。

HTML

<div class="trigger">
    <div tabindex="0" class="maincontent static">
        <div class="slider2">
            <img src="client9.jpg" height="200" width="200" />
            <img src="client10.jpg" height="200" width="200" />
            <img src="client11.jpg" height="200" width="200" />
            <img src="client2.jpg" height="200" width="200" />
        </div>
    </div>
</div>

CSS

.trigger {
    width: 200px;
    height: 200px;
}

.static {
    position: relative;
    width: 200px;
    height: 200px;
    text-align: center;
    font-size: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCB2;
    border-radius: 5px; 
}

Answer 1

试试这个:

添加到 CSS

.slider2 { position: relative; }

.caption-box {
  position: absolute;
  right: 0;
  height: 20px;
  width:100px;
  background-color: red; // change to suit
  color: #fff; // change to suit
}

您的 HTML 已更改:

<div class="caption-box">Caption</div><!-- added this -->
<div class="slider2">
        <img src="client9.jpg" height="200" width="200" />
        <img src="client10.jpg" height="200" width="200" />
        <img src="client11.jpg" height="200" width="200" />
        <img src="client2.jpg" height="200" width="200" />
    </div>