在html css中创建一个框/单元格以在图像上放置文本
我试图添加一个框，我可以添加一些文本和图像 上图是我已经做过的设置。我想在粉色盒子的位置添加一个盒子。到目前为止，我的代码是：在html css中创建一个框/单元格以在图像上放置文本,html,css,Html,Css,我试图添加一个框，我可以添加一些文本和图像 上图是我已经做过的设置。我想在粉色盒子的位置添加一个盒子。到目前为止，我的代码是： html, body { height:100%; padding:0; margin:0; } #wrapper { display:table; height:100%; width:100%; } #wrapper .row { display:table-row; } #wrapper .cell {
html, body {
height:100%;
padding:0;
margin:0;
}
#wrapper {
display:table;
height:100%;
width:100%;
}
#wrapper .row {
display:table-row;
}
#wrapper .cell {
display:table-cell;
width:100%;
}
#header .cell {
height:55px;
vertical-align:top;
background:#ffffff;
/*good color: fbf9f9*/
}
#body, #body.cell {
height:100%;
}
#body .cell {
vertical-align:middle;
text-align:center;
position:relative;
}
.innerdiv {
position:absolute;
bottom:0;
right:0;
z-index: -2;
}
.centeredImage {
display:inline-block;
padding:0;
margin:0;
}
.imageCorner {
display: block;
}
.right {
position: absolute;
right: 5px;
padding: 2px 0 0 0;
}
.right2 {
position: absolute;
right: 60px;
padding: 2px 0 0 0;
}
.right3{
position: absolute;
left:5px;
padding: 4px 0 0 0;
}
我希望无论屏幕大小如何，框都保持在正确的位置。不知道如何进行，尝试创建一些div，但无法将其置于正确的位置。有人能给我指点怎么做吗？fiddle:jsfiddle.net/&togetherjs=4d09vpG7p2您的jsfiddle链接不工作。@您看不到代码或链接已断开吗？
<body>
<div id="wrapper">
<div id="header" class="row">
<div class="cell"><img class="right3" src="dl.png"><img class="right2" src="twitter.png"><img class="right" src="fblogo2.png"></div>
</div>
<div id="body" class="row">
<div class="cell">
<div class="innerdiv">
<img class="imageCorner" src="logo.png" />
</div>
<p class="centeredImage">
<img src="smallslide1.png" >
</p>
</div>
</div>
</div>
</body>