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

时间:2015-07-25 22:43:19

标签: html css overlap

我已经了解了制作此框所需的内容,如下所示: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保证金权利:1000px;只是为了测试它是否完全移动,但它没有,我不知道如何制作它以便它将达到我想要它的位置。 感谢。

2 个答案:

答案 0 :(得分:3)

你想要的是absolute positioning,这会使有问题的元素完全脱离正常流程。然后使用left: 1em绝对地从第一个非静态定位的父元素定位元素。 (即“坚持这个孩子x距离其父母的一侧/一角的距离”)

top: 1em

答案 1 :(得分:0)

执行[Code] procedure AppendKey(const FileName, Section, KeyName, KeyValue: string); var S: string; I: Integer; CurLine: string; LineIdx: Integer; SnFound: Boolean; Strings: TStringList; begin Strings := TStringList.Create; try S := Format('[%s]', [Section]); Strings.LoadFromFile(FileName); SnFound := False; LineIdx := Strings.Count; for I := Strings.Count - 1 downto 0 do begin CurLine := Trim(Strings[I]); // if the iterated line is a section, then... if (Length(CurLine) > 2) and (CurLine[1] = '[') and (CurLine[Length(CurLine)] = ']') then begin // if the iterated line is the section we are looking for, then... if CompareText(S, CurLine) = 0 then begin SnFound := True; Break; end; end else if CurLine = '' then LineIdx := I; end; if not SnFound then begin Strings.Add(S); Strings.Add(Format('%s=%s', [KeyName, KeyValue])); end else Strings.Insert(LineIdx, Format('%s=%s', [KeyName, KeyValue])); Strings.SaveToFile(FileName); finally Strings.Free; end; end; 然后AppendKey('C:\File.ini', 'Section', 'KeyName', 'KeyValue'); position: relative或您希望将其移入的方向。这会将元素相对于其原始位置移动但是在正常的文件流程之外。