如何有一个图像重叠的边缘，一个div

Question

我有一张图片，我需要让这个框看起来像这里:https://i.stack.imgur.com/IODrN.png

然而，我之前没有做过任何与重叠有关的事情，也没有找到关于如何处理这个问题的太多帮助。这是我目前得到的代码，如果有人能给我指出正确的方向，我将不胜感激。

HTML:

    <div id="TennantAnn">
    <div id="AnnIcon">
    <img src="Images/AnnouncementIcon.PNG"> 
    </div>
    </div>

CSS:

   #TennantAnn {
   display:inline-block;
   width:450px;
   height:620px;
   margin-bottom:60px;
   box-shadow: -5px -5px 5px 5px #F0F0F0;
   margin-top:30px;
   margin-left:120px;
   border-color:#F0F0F0;
   overflow:visible;
   } 
   #AnnIcon {
   margin-right:1000px;
   }  

我给AnnIcon设置了margin-right:1000px;只是为了测试它是否会移动，但它没有，我不知道如何让它到达我想要的位置。谢谢。

Answer 1

你想要的是绝对定位，这将使所讨论的元素完全脱离正常流程。然后使用top,left,right,bottom绝对地从第一个非静态定位的父元素定位元素。(例如，"将子节点与父节点的边/角保持x距离")

   #TennantAnn {
   display:inline-block;
   width:450px;
   height:620px;
   margin-bottom:60px;
   box-shadow: -5px -5px 5px 5px #F0F0F0;
   margin-top:30px;
   margin-left:120px;
   border-color:#F0F0F0;
   overflow:visible;
   position:relative; /* parent must not be statically positioned */
   } 
   #AnnIcon {
   position:absolute;
   top:-15px;
   left:-15px;
   }  

Answer 2

做position: relative，然后left: 1em或top: 1em或任何你想要移动的方向。这将移动元素相对于它的原始位置，但超出正常的文档流程。