CODEWITHSUNDEEP
htmlcss
Maher Khalil
Maher Khalil

Reputation: 539

Div above absolute div

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 enter image description here

Upvotes: 0

Views: 67

Answers (3)

krizpers
krizpers

Reputation: 107

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;**
}

Upvotes: 0

brian17han
brian17han

Reputation: 1289

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>

Upvotes: 1

crapier
crapier

Reputation: 373

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>

Upvotes: 0

Related Questions