将div放在图像的角落 [英] Position divs in corners of an image

查看：82
本文介绍了将div放在图像的角落的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图在图片右上角放置BRAND，右下角放置CATEGORY。



我很接近。



但是，如何让它完全适合图像内部和右上角和右下角？ 

  .category {font-size：10px; font-weight：700; font-family：'蒙特塞拉特'，sans-serif; font-style：bold; text-align：center;颜色：＃777; margin-left：15px;大纲：1px固体#fff; padding：2px 20px 2px 8px;背景颜色：黄色;不透明度：0.9; z-index：3;显示：块; float：right;位置：相对;不透明度：0.7;底部：0;左：0; min-height：0;}。brand {font-size：10px; font-weight：700; font-family：'蒙特塞拉特'，sans-serif; font-style：bold; text-align：center;颜色：＃777; margin-left：15px;大纲：1px固体#fff; padding：2px 20px 2px 8px; background-color：#fff;不透明度：0.9; z-index：3;显示：块; float：right;位置：相对;不透明度：0.7; top：0px; right：0px; min-height：0;}。image {max-width：100％;保证金：0;显示：块; padding：0px;}

< div class =image > < a href =＃target =_ blank> < img alt =imgsrc =http://lorempixel.com/400/400> < / A> < div class =brand>品牌< / DIV> < div class =category>

解决方案

您可以将容器（ div.image ）设置为相对定位的边界框，这将允许您将子项绝对放置在边界内：



.image {position：relative; / * 1 * / display：inline-block; / * 2 * /} .brand {position：absolute; / * 3 * / top：0;正确：0;白颜色; font-weight：bold;}。category {position：absolute; / * 3 * / bottom：0;正确：0;白颜色; font-weight：bold;}

< div class = 图像 > < a href =＃target =_ blank> < img alt =imgsrc =http://lorempixel.com/400/400> < / A> < div class =brand>品牌< / div> < div class =category> Category< / div>< / div>

注：


  1. 为绝对定位建立最近定位的祖先

  2. 容器的宽度是流入内容的宽度

  3. 使用具有偏移属性的绝对定位（ top ， bottom ， left ， right ）来移动容器中的子元素


I am trying to position "BRAND" in the top right corner, and "CATEGORY" in the bottom right corner, of an image.

I am close.

But how do I make it fit exactly inside the image and in the corners top right and bottom right?

.category {
  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;
  opacity: 0.9;
  z-index: 3;
  display: block;
  float: right;
  position: relative;
  opacity: 0.7;
  bottom: 0;
  left: 0;
  min-height: 0;
}
.brand {
  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: #fff;
  opacity: 0.9;
  z-index: 3;
  display: block;
  float: right;
  position: relative;
  opacity: 0.7;
  top: 0px;
  right: 0px;
  min-height: 0;
}
.image {
  max-width: 100%;
  margin: 0;
  display: block;
  padding: 0px;
}

<div class="image">
  <a href="#" target="_blank">
    <img alt="img" src="http://lorempixel.com/400/400">
  </a>

  <div class="brand">
    Brand</div>

  <div class="category">
    Category
  </div>
</div>

解决方案

You can make the container (div.image) a relatively-positioned bounding box, which will allow you to absolutely position the children within its borders:

.image {
  position: relative;           /* 1 */
  display: inline-block;        /* 2 */  
}
.brand {
  position: absolute;           /* 3 */
  top: 0;
  right: 0;
  color: white;
  font-weight: bold;
}
.category {
  position: absolute;           /* 3 */
  bottom: 0;
  right: 0;
  color: white;
  font-weight: bold;
}

<div class="image">
  <a href="#" target="_blank">
    <img alt="img" src="http://lorempixel.com/400/400">
  </a>
  <div class="brand">Brand</div>
  <div class="category">Category</div>
</div>

Notes:

  1. Establish nearest positioned ancestor for absolute positioning.
  2. Width of container is width of in-flow content
  3. Use absolute positioning with offset properties (top, bottom, left, right) to move child elements within container

这篇关于将div放在图像的角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆