我有两个DIV在彼此里面。内部DIV包含图像。我正在尝试在右上角的图像上添加浮动文本。我无法弄清楚如何使该文本使用内部DIV的位置而不是外部的位置。
这是我到目前为止所得到的
CSS:
html {
background: #EEF0F3;
}
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
.inner {
position: relative;
}
h2 {
position: absolute;
top: 0px;
right: 0px;
}
h2 span {
color: white;
font: bold 24px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgba(255, 0, 0, 0.5);
padding: 0px 10px;
}
HTML:
<div class="outer">
<div class="inner">
<h2><span>Title 1</span></h2>
<img src="1.jpg">
</div>
</div>
这是JSFiddle中的代码
如果我将定位设置为:
h2 {
position: absolute;
top: 20px;
right: -20px;
}
我得到了理想的结果,但这感觉就像解决方法而不是解决方案。
答案 0 :(得分:2)
非常简单。
选中此fiddle
.outer {
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 0 auto;
padding:20px 0px;
position: relative;
width: 680px;
text-align: center;
margin-bottom: 20px;
}
for h2
h2
{
position: absolute;
top: 5px;
right: 20px;
margin:0;
}
答案 1 :(得分:1)
您有此行为,因为.outer
比图片宽,然后.inner
。 h2
的定位与.inner
相关,并向右移动。
如果您将.outer
设置为640px宽度(作为图像),则会获得desired result。
Other solution是在margin: 0 20px;
.inner
如果您想要text positioned all top图片,可以在两种情况下设置h2 {margin:0;}
。