CODEWITHSUNDEEP
htmlcss
user4752928
user4752928

Reputation:

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>

Upvotes: 1

Views: 58

Answers (5)

遁地龙卷风
遁地龙卷风

Reputation: 40

Do you want to hide the picture? If so,the two DIVs must have position:absolute;,adjust top and left of two DIVs. If not, think about what you want.

Upvotes: 0

pol
pol

Reputation: 2701

This should do it. Add the divs inside the a element and make it position: relative and display: inline-block

.image-video-linkmas a {
  display: inline-block;
  position: relative;
  height: 400px;
}
.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">
                                <div class="brandmas">
                                    BRAND CAR
                                </div>
                                <div class="categorymas">
                                   SELLER CAR
                                </div></a>
                                
                            </div>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>

Upvotes: 1

Ricky Ruiz
Ricky Ruiz

Reputation: 26781

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>

Upvotes: 0

Tundra Shark
Tundra Shark

Reputation: 493

Add this to your style.

.item_inner {
  position: absolute;
}

Note that this may instead be added to one of these classes instead if you want:

  • container
  • articleslist
  • article
  • item

Upvotes: 0

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

You need to add the relative position to the wrapping (parent) div not the image itself, see fiddle https://jsfiddle.net/0vLmt3L5/10/

.image-video-linkmas {
    max-width: 400px;
    max-height: 400px;
    margin: 0;
    position: relative;
    padding: 0px;
  }
 .image-video-linkmas img{    
    max-width: 100%;
    max-height: 100%;
 } 
.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;*/
  }

Upvotes: 1

Related Questions