将图像放在边框的左角

Question

我的问题非常简单，我想在边框的左角放置一个小图像，如下例所示。

我的代码

.description{
  border: 1px dotted black;
  position: relative;
}

.img-description{
  position: absolute;
  top: 0;
  left: 0;
}

p{
  padding: 20px;
}

<div class="col-md-4 description">
  <img src="http://i.imgur.com/m8s1L6J.png" class="img-description"/>
  <p>Some text...</p>
</div>

你知道我怎么能做到这一点吗？

感谢您的帮助。

Answer 1

img {
  margin-left: -5px;
  margin-top: -5px;
}

Answer 2

如果您已有此代码

.img-description{
  position: absolute;
  top: 0;
  left: 0;
}

您可以更新顶部和左侧值以符合您的想法。例如：

.img-description{
  position: absolute;
  top: -10px;
  left: -10px;
}

Answer 3

只需将您的Top和Left值更改为负值。

 .img-description{
  position: absolute;
  top: -5px;
  left: -5px;
  }

这是新的CSS代码：https://jsfiddle.net/939q3rco/

Answer 4

您只需要为top和left规则使用负值。

Like this fiddle.

Answer 5

您可以为x和y添加一些否定transform: translate()。

＆＃13;

＆＃13;

.description {
  border: 1px dotted black;
  position: relative;
  margin: 20px;
}
.img-description {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-5px, -5px);
}
p {
  padding: 20px;
}

＆＃13;

<div class="col-md-4 description">
  <img src="http://i.imgur.com/m8s1L6J.png" class="img-description" />
  <p>Some text...</p>
</div>

＆＃13;

＆＃13;

＆＃13;