Question

我有一个200px到200px div内的小滑块。然而，我真正喜欢的是在右上角有一个100px乘20px的标题框，里面有彩色背景和一个单词。问题是，因为我已经在框（滑块）中有内容，如果我尝试添加标题div它不会位于现有内容的顶部，它会扭曲200px的大小200px div。 / p>

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>

为已包含内容的div添加标题

1 个答案: