Div above absolute div - html

Question

here is a fiddle link
.authorTag {
float: right;
position: absolute;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.DateTag {
float: right;
position: relative;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.DivTitle {
float: left;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
width: 100%;
}
.contentContainer {
position: relative;
width: 300px;
height: 300px;
/* top:0;
left:0;*/
border: 1px solid black;
margin: 5px;
}
<div class="contentContainer">
<div class="tag">Featured</div>
<div class="authorTag">authorTag</div>
<div class="DateTag">Time</div>
<img src="https://dummyimage.com/100/000000/fff" width="100%">
<div class="DivTitle"> Title </div>
</div>
Fiddle Link
the scenario
a container div
image fill the container div (No Problem if it is background of the container div)
Title div at the bottom of the container
four div in every corner in the remaining space
Note : the Title div with dynamic text which means it might be one or more lines
image of the desired output

Answer 1

Hope the following code helps. I made the image as the background image with background-size: cover;. Also I separated the tags into top and bottom section, and used float left and right to position the tags.
.contentContainer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 5px;
background: url('https://dummyimage.com/100/000000/fff') no-repeat center center;
background-size: cover;
}
.topTags {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.bottomTags {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.tag {
width: auto;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
box-sizing: border-box;
}
.left {
float: left;
}
.right {
float: right;
}
.divTitle {
width: 100%;
clear: both;
}
<div class="contentContainer">
<div class="topTags">
<div class="tag left">Featured</div>
<div class="tag right">authorTag</div>
</div>
<div class="bottomTags">
<div class="tag left">Time</div>
<div class="tag right">Bottom Left</div>
<div class="tag divTitle">Title can be very long. Title can be very long. Title can be very long.</div>
</div>
</div>
Solution 2, image as <img>
.contentContainer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 5px;
}
.bgImage {
position: absolute;
width: 100%;
height: 100%;
}
.topTags {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.bottomTags {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
z-index: 1000;
}
.tag {
width: auto;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
box-sizing: border-box;
}
.left {
float: left;
}
.right {
float: right;
}
.divTitle {
width: 100%;
clear: both;
}
<div class="contentContainer">
<div class="topTags">
<div class="tag left">Featured</div>
<div class="tag right">authorTag</div>
</div>
<img class="bgImage" src="https://dummyimage.com/100/000000/fff" />
<div class="bottomTags">
<div class="tag left">Time</div>
<div class="tag right">Bottom Left</div>
<div class="tag divTitle">Title can be very long. Title can be very long. Title can be very long.</div>
</div>
</div>

Answer 2

Here is an alternate solution. By placing the bottom tags in the title bar we can position them relative to it.
.background {
position: absolute;
top: 0px;
left: 0px;
z-index: 999;
}
.topLeft {
position: absolute;
top: 0px;
left: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.topRight {
position: absolute;
top: 0px;
right: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.bottomLeft {
position: absolute;
bottom: 100%;
left: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.bottomRight {
position: absolute;
bottom: 100%;
right: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
}
.bottomBar {
position: absolute;
bottom: 0px;
left: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor: pointer;
/* Remove padding left and right from width*/
width: calc(100% - 10px);
}
.contentContainer {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
margin: 5px;
}
<div class="contentContainer">
<img class="background" src="https://dummyimage.com/100/000000/fff" width="100%">
<div class="tag topLeft">Featured</div>
<div class="authorTag topRight">authorTag</div>
<div class="bottomBar">
<div class="otherTag bottomLeft">Other</div>
<div class="dateTag bottomRight">Time</div>
<div class="divTitle">Title - this can be any amount of text, bottom tags will move up.</div>
</div>
</div>

Answer 3

Here you go. Your issue was that the image should be a background image set to the container div. Then you need to add a background size to "cover" to get it to fit. Next you had some screwed up css. Your "Divtitle" class had a padding set so it forced it to go out of bounds. If you want padding top or left or bottom use "padding-left", "padding-right", ect. I also added an extra container div with a set height and width so that way "contentContainer" can be set to 100% width and height with the image but nor screwing anything up.
Here is your fiddle with the corrections: https://jsfiddle.net/32vg2466/1/
HTML:
<div style="width: 250px; height: 250px;">
<div class="contentContainer" >
<div class="tag">Featured</div>
<div class="authorTag">authorTag</div>
<div class="DateTag">Time</div>
<div class="DivTitle"> Title </div>
</div>
</div>
CSS:
.authorTag
{
float: right;
position: absolute;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
}
.DateTag
{
float: right;
position: relative;
right: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
}
.tag {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #92AD40;
padding: 5px;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
}
.DivTitle {
float: left;
position: absolute;
left: 0px;
bottom: 0px;
z-index: 1000;
background-color: #92AD40;
color: #FFFFFF;
font-weight: bold;
cursor:pointer;
width: 100%;
}
.contentContainer{
position:relative;
width:100%;
height:100%;
/* top:0;
left:0;*/
border:1px solid black;
margin:5px;
**background-image: url("https://dummyimage.com/100/000000/fff");
background-position: center;
background-size: cover;**
}