raulbaros raulbaros - 3 months ago 7
HTML Question

Position DIVs in top right of image and in top bottom another div

I try to position two DIVs inside an image... the DIV called "brand car" should be in the exact top right corner of the image. And the second DIV called "seller car" should be in right bottom corner of the image. Is that possible (I have the entire DIV structure as displayed in the code which I have to absolutely keep)?



.image-video-linkmas img {
max-width: 100%;
max-height: 100%;
margin: 0;
position: relative;
display: inline-block;
padding: 0px;
}

.brandmas {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
outline: 1px solid #fff;
padding: 2px 20px 2px 8px;
background-color: red;
opacity: 0.9;
position: absolute;
opacity: 0.7;
top: 0;
right: 0;
min-height: 0;
}

.categorymas {
font-size: 10px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
font-style: bold;
text-align: center;
color: #777;
margin-left: 15px;
/*outline: 1px solid #fff;*/
padding: 2px 20px 2px 8px;
background-color: yellow;
position: absolute;
opacity: 0.7;
bottom: 0;
right: 0;
/*min-height: 0;*/
}

<div class="container">
<div class="rows">
<div id="articleslist">
<div class="article">
<article class="item">
<div class="item_inner">
<div class="image-video-linkmas">
<a href="#" target=
"_blank"><img alt="#" src=
"http://lorempixel.com/400/400"></a>
<div class="brandmas">
BRAND CAR
</div>
<div class="categorymas">
SELLER CAR
</div>
</div>
</div>
</article>
</div>
</div>
</div>
</div>




Answer

You were so close man!

You may be asking yourself, what is going on?

What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent.

Remember that when you use position: absolute; on child elements, the parent one should have position: relative;else they will always position in relation to the body element.


JSFIDDLE


.image-video-linkmas {
  position: relative;
  display: inline-block;
}
.image-video-linkmas img {
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  position: relative;
  vertical-align: middle;
  padding: 0px;
}
.brandmas {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-style: bold;
  text-align: center;
  color: #777;
  margin-left: 15px;
  outline: 1px solid #fff;
  padding: 2px 20px 2px 8px;
  background-color: red;
  opacity: 0.9;
  position: absolute;
  opacity: 0.7;
  top: 0;
  right: 0;
  min-height: 0;
}
.categorymas {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-style: bold;
  text-align: center;
  color: #777;
  margin-left: 15px;
  /*outline: 1px solid #fff;*/
  padding: 2px 20px 2px 8px;
  background-color: yellow;
  position: absolute;
  opacity: 0.7;
  bottom: 0;
  right: 0;
  /*min-height: 0;*/
}
<div class="container">
  <div class="rows">
    <div id="articleslist">
      <div class="article">
        <article class="item">
          <div class="item_inner">
            <div class="image-video-linkmas">
              <a href="#" target="_blank">
                <img alt="#" src="http://lorempixel.com/400/400">
              </a>
              <div class="brandmas">
                BRAND CAR
              </div>
              <div class="categorymas">
                SELLER CAR
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</div>

Comments