如何让图像与 div 的边缘重叠

Question

我有一张让这个盒子看起来像我需要什么的照片，如下所示：http://i.imgur.com/9aPwTEY.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

执行 position: relative 然后 left: 1em 或 top: 1em 或任何你想移动的方向。这将移动元素 相对于它的原始位置 但在正常文档流之外。

Answer 2

您想要的是 absolute positioning，这会提取有问题的元素并将其完全脱离正常流。然后使用 top,left,right,bottom 从第一个非静态定位的父元素绝对定位元素。（即 "stick this child x distance from the side/corner of its parent"）

   #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;
   }

如何让图像与 div 的边缘重叠

How to have an image overlap the edge of a div

html

css

overlap