How to have an image overlap the edge of a div


Tags: html,css,overlap

Problem :

I've got a picture of what I need to make this box look like, shown here: http://i.imgur.com/9aPwTEY.png

However I haven't done anything to do with overlapping before and haven't been able to find much help on how to approach this problem. Here's the code I've got so far, if someone could point me in the right direction that would be appreciated.

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

I gave AnnIcon the margin-right:1000px; just to test whether or not it'd move over at all, but it doesn't, and I don't know how to make it so that it will get to the position I want it to be in. Thanks.



Solution :

What you want is absolute positioning, this takes the element in question and pulls it completely out of normal flow. You then use top,left,right,bottom to position the element absolutely from the first non statically positioned parent element. (ie, "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;
   }  

    CSS Howto..

    How to make box light up in navigation bar - CSS

    How to disable fixed header on Mobile with CSS

    How to get divs and anchors stacked on top of each other with the same width

    How can create a two-column layout in CSS where one column shrinks to it's content, and the other expands to fill the remaining space?

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How to apply CSS changes for the last

    element of the 3rd div class span8

    How to dynamically change width of Div1 inside a scrollable Div2 to Div2's width

    CSS: How to scale an to cover entire parent
    ?

    How to get the authored style properties of an element?

    How do I remove a hover effect if the Element has focus?

    How to convert columns to rows using CSS

    How to hide navbar when when overlay appears

    How to apply CSS class to a parent element?

    How to centre a javascript element using inline css? [closed]

    How to enable -webkit-animation/transition-property for :before and :after pseudo elements?

    How to define margin (CSS) around an absolutely positioned, floating element?

    How to fade multiple background colors after few seconds? [duplicate]

    How to compile CSS into SCSS

    How to make a pure css triangle which has a white center

    Want to override Bootstrap, but how to avoid the use of !important?

    how to change the background color of the holder of an image using jquery cycle

    jqueryui dialog with table — how to limit row height

    How to include custom css in Extjs 6?

    How to stop content from overlapping the footer?

    How to do this angle background by CSS?

    When using padding-top to retain aspect ratio for fluid layout, how do I vertically center text to background image?

    How to apply row virtualization for a table / list in HTML/CSS/JS? [closed]

    Show 100% of background

    How to change position of a sphere overtime using css

    How to override overridden class — CSS