Question

我尝试在图像中放置两个DIV ...... DIV称为＆＃34;品牌汽车＆＃34;应该在图像的正确右上角。而第二个DIV叫做＃34;卖车＆＃34;应该在图像的右下角。这是可能的（我有完整的DIV结构，如我必须绝对保留的代码中所示）？

＆＃13;

DBProject
  -> MyContext
  -> Service (entity/table)
       -> Fields for all Services
MyServiceProject
  -> MyService : DBProject.Service
       -> FieldSpecificToMyService

＆＃13;

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

＆＃13;

Answer 1

您需要将relative位置添加到包装（父级）div而不是图像本身，请参阅小提琴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;*/
  }

Answer 2

这应该这样做。在a元素中添加div并将其设为position: relative和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>

Answer 3

你是如此亲密的男人！

你可能会问自己，发生了什么事？

正在发生的是绝对定位的元素将自己定位于身体元素而不是他们的直接父母。

请记住，当您对子元素使用position: absolute;时，父元素应该position: relative;，否则它们将始终相对于body元素定位。

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>

Answer 4

将此添加到您的风格中。

.item_inner {
  position: absolute;
}

请注意，如果您愿意，可以将其添加到其中一个类中：

容器
articleslist
文章
项目

Answer 5

你想隐藏图片吗？如果是这样，两个DIV必须position:absolute;，调整两个DIV的顶部和左侧。如果没有，请考虑一下你想要的东西。

将DIV放在图像的右上角，在顶部的底部放置另一个div

5 个答案: