找到你要的答案

Q:Creating a box/cell to put text on an image in html css

Q:创建一个盒子/细胞放在HTML CSS图像上的文字

I am trying to add a box that I can add some text and an image to enter image description here

The above image is the setup I already have. I want to add a box where the pink box is. So far my code is:

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;

}

html:

<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>

I want the box to stay in the correct position regardless of screen size. Not sure how to go about this, tried creating some divs but couldn't get it in the right position. Could someone give me some pointers on how to do this please? fiddle: jsfiddle.net/#&togetherjs=4d09vpG7p2

I am trying to add a box that I can add some text and an image to enter image description here

上面的图像是我已经设置的。我想加一个粉红色盒子的盒子。到目前为止我的代码是:

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;

}

HTML:

<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>

不管屏幕大小,我都希望盒子保持在正确的位置。不知道如何开始,尝试创造一些div元素,但不能得到它在正确的位置。有人能给我一些指点怎么做吗?小提琴:JSFiddle。网/ # &;togetherjs = 4d09vpg7p2

html  css