How to overlay one div over another div

Question

I need assistance with overlaying one individual div over another individual div   My code looks like this    lt div class  navi  gt  lt  div gt   lt div id  infoi  gt       lt img src  info icon2 png  height  20  width  32   gt   lt  div gt    Unfortunately I cannot nest the div infoi or the img  inside the first div navi   It has to be two separate divs as shown  but I need to know how I could place the div infoi over the div navi and to the right most side and centered on top of the div navi

User · Answer

The accepted solution works great  but IMO lacks an explanation as to why it works  The example below is boiled down to the basics and separates the important CSS from the non-relevant styling CSS  As a bonus  I ve also included a detailed explanation of how CSS positioning works   TLDR  if you only want the code  scroll down to The Result   The Problem  There are two separate  sibling  elements and the goal is to position the second element  with an id of infoi   so it appears within the previous element  the one with a class of navi   The HTML structure cannot be changed   Proposed Solution  To achieve the desired result we re going to move  or position  the second element  which we ll call  infoi so it appears within the first element  which we ll call  navi  Specifically  we want  infoi to be positioned in the top-right corner of  navi   CSS Position Required Knowledge  CSS has several properties for positioning elements  By default  all elements are position  static  This means the element will be positioned according to its order in the HTML structure  with few exceptions   The other position values are relative  absolute  sticky  and fixed  By setting an element s position to one of these other values it s now possible to use a combination of the following four properties to position the element    top right bottom left   In other words  by setting position  absolute  we can add top  100px to position the element 100 pixels from the top of the page  Conversely  if we set bottom  100px the element would be positioned 100 pixels from the bottom of the page   Here s where many CSS newcomers get lost - position  absolute has a frame of reference  In the example above  the frame of reference is the body element  position  absolute with top  100px means the element is positioned 100 pixels from the top of the body element   The position frame of reference  or position context  can be altered by setting the position of a parent element to any value other than position  static  That is  we can create a new position context by giving a parent element    position  relative  position  absolute  position  sticky  position  fixed    For example  if a  lt div class  parent  gt  element is given position  relative  any child elements use the  lt div class  parent  gt  as their position context  If a child element were given position  absolute and top  100px  the element would be positioned 100 pixels from the top of the  lt div class  parent  gt  element  because the  lt div class  parent  gt  is now the position context   The other factor to be aware of is stack order - or how elements are stacked in the z-direction  The must-know here is the stack order of elements are  by default  defined by the reverse of their order in the HTML structure  Consider the following example    lt body gt     lt div gt Bottom lt  div gt     lt div gt Top lt  div gt   lt  body gt    In this example  if the two  lt div gt  elements were positioned in the same place on the page  the  lt div gt Top lt  div gt  element would cover the  lt div gt Bottom lt  div gt  element  Since  lt div gt Top lt  div gt  comes after  lt div gt Bottom lt  div gt  in the HTML structure it has a higher stacking order    x000D   x000D  div   x000D    position  absolute  x000D    width  50   x000D    height  50   x000D    x000D   x000D   bottom   x000D    top  0  x000D    left  0  x000D    background-color  blue  x000D    x000D   x000D   top   x000D    top  25   x000D    left  25   x000D    background-color  red  x000D    x000D   lt div id  bottom  gt Bottom lt  div gt  x000D   lt div id  top  gt Top lt  div gt  x000D   x000D   x000D    The stacking order can be changed with CSS using the z-index or order properties   We can ignore the stacking order in this issue as the natural HTML structure of the elements means the element we want to appear on top comes after the other element   So  back to the problem at hand - we ll use position context to solve this issue   The Solution  As stated above  our goal is to position the  infoi element so it appears within the  navi element  To do this  we ll wrap the  navi and  infoi elements in a new element  lt div class  wrapper  gt  so we can create a new position context    lt div class  wrapper  gt     lt div class  navi  gt  lt  div gt     lt div id  infoi  gt  lt  div gt   lt  div gt    Then create a new position context by giving  wrapper a position  relative    wrapper     position  relative      With this new position context  we can position  infoi within  wrapper   First  give  infoi a position  absolute  allowing us to position  infoi absolutely in  wrapper   Then add top  0 and right  0 to position the  infoi element in the top-right corner  Remember  because the  infoi element is using  wrapper as its position context  it will be in the top-right of the  wrapper element    infoi     position  absolute    top  0    right  0      Because  wrapper is merely a container for  navi  positioning  infoi in the top-right corner of  wrapper gives the effect of being positioned in the top-right corner of  navi   And there we have it   infoi now appears to be in the top-right corner of  navi   The Result  The example below is boiled down to the basics  and contains some minimal styling      x000D   x000D     x000D     position  relative gives a new position context x000D     x000D   wrapper   x000D    position  relative  x000D    x000D   x000D     x000D     The  navi properties are for styling only x000D     These properties can be changed or removed x000D     x000D   navi   x000D    background-color   eaeaea  x000D    height  40px  x000D    x000D   x000D   x000D     x000D     Position the  infoi element in the top-right x000D     of the  wrapper element x000D     x000D   infoi   x000D    position  absolute  x000D    top  0  x000D    right  0  x000D   x000D       x000D       Styling only  the below can be changed or removed x000D       depending on your use case x000D       x000D    height  20px  x000D    padding  10px 10px  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  navi  gt  lt  div gt  x000D     lt div id  infoi  gt  x000D       lt img src  http   via placeholder com 32x20 000000 ffffff text    height  20  width  32   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    An Alternate  Grid  Solution  Here s an alternate solution using CSS Grid to position the  navi element with the  infoi element in the far right  I ve used the verbose grid properties to make it as clear as possible     x000D   x000D   root   x000D    --columns  12  x000D    x000D   x000D     x000D     Setup the wrapper as a Grid element  with 12 columns  1 row x000D     x000D   wrapper   x000D    display  grid  x000D    grid-template-columns  repeat var --columns   1fr   x000D    grid-template-rows  40px  x000D    x000D   x000D     x000D     Position the  navi element to span all columns x000D     x000D   navi   x000D    grid-column-start  1  x000D    grid-column-end  span var --columns   x000D    grid-row-start  1  x000D    grid-row-end  2  x000D     x000D       x000D       Styling only  the below can be changed or removed x000D       depending on your use case x000D       x000D    background-color   eaeaea  x000D    x000D   x000D   x000D     x000D     Position the  infoi element in the last column  and center it x000D     x000D   infoi   x000D    grid-column-start  var --columns   x000D    grid-column-end  span 1  x000D    grid-row-start  1  x000D    place-self  center  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  navi  gt  lt  div gt  x000D     lt div id  infoi  gt  x000D       lt img src  http   via placeholder com 32x20 000000 ffffff text    height  20  width  32   gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    An Alternate  No Wrapper  Solution  In the case we can t edit any HTML  meaning we can t add a wrapper element  we can still achieve the desired effect   Instead of using position  absolute on the  infoi element  we ll use position  relative  This allows us to reposition the  infoi element from its default position below the  navi element  With position  relative we can use a negative top value to move it up from its default position  and a left value of 100  minus a few pixels  using left  calc 100  - 52px   to position it near the right-side    x000D   x000D     x000D     The  navi properties are for styling only x000D     These properties can be changed or removed x000D     x000D   navi   x000D    background-color   eaeaea  x000D    height  40px  x000D    width  100   x000D    x000D   x000D   x000D     x000D     Position the  infoi element in the top-right x000D     of the  wrapper element x000D     x000D   infoi   x000D    position  relative  x000D    display  inline-block  x000D    top  -40px  x000D    left  calc 100  - 52px   x000D   x000D       x000D       Styling only  the below can be changed or removed x000D       depending on your use case x000D       x000D    height  20px  x000D    padding  10px 10px  x000D    x000D   lt div class  navi  gt  lt  div gt  x000D   lt div id  infoi  gt  x000D     lt img src  http   via placeholder com 32x20 000000 ffffff text    height  20  width  32   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I am not much of a coder nor an expert in CSS  but I am still using your idea in my web designs  I have tried different resolutions too    x000D   x000D   wrapper   x000D    margin  0 auto  x000D    width  901px  x000D    height  100   x000D    background-color   f7f7f7  x000D    background-image  url images wrapperback gif   x000D    color   000  x000D    x000D   header   x000D    float  left  x000D    width  100 00   x000D    height  122px  x000D    background-color   00314e  x000D    background-image  url images header jpg   x000D    color   fff  x000D    x000D   menu   x000D    float  left  x000D    padding-top  20px  x000D    margin-left  495px  x000D    width  390px  x000D    color   f1f1f1  x000D    x000D   lt div id  wrapper  gt  x000D     lt div id  header  gt  x000D       lt div id  menu  gt  x000D        menu will go here x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Of course there will be a wrapper around both of them  You can control the location of the menu div which will be displayed within the header div with left margins and top positions  You can also set the div menu to float right if you like

User · Answer

Here is a simple example to bring an overlay effect with a loading icon over another div    lt style gt       overlay           position  absolute          width  100           height  100           background  black url  icons loading gif   center center no-repeat     Make sure the path and a fine named  loading gif  is there            background-size  50px          z-index  1          opacity   6             wraper          position  relative          width 400px      Just for testing  remove width and height if you have content inside this div            height 500px     Remove this if you have content inside           lt  style gt    lt h2 gt The overlay tester lt  h2 gt   lt div class  wraper  gt       lt div id  overlay  gt  lt  div gt       lt h3 gt Apply the overlay over this div lt  h3 gt   lt  div gt    Try it here  http   jsbin com fotozolucu edit html css output

User · Answer

Here follows a simple solution 100  based on CSS  The  secret  is to use the display  inline-block in the wrapper element  The vertical-align  bottom in the image is a hack to overcome the 4px padding that some browsers add after the element   Advice  if the element before the wrapper is inline they can end up nested  In this case you can  wrap the wrapper  inside a container with display  block - usually a good and old div    x000D   x000D   wrapper   x000D      display  inline-block  x000D      position  relative  x000D    x000D   x000D   hover   x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      right  0  x000D      bottom  0  x000D      background-color  rgba 0  188  212  0   x000D      transition  background-color 0 5s  x000D    x000D   x000D   hover hover   x000D      background-color  rgba 0  188  212  0 8   x000D         You can tweak with other background properties too  ie  background-image     x000D    x000D   x000D  img   x000D      vertical-align  bottom  x000D    x000D   lt div class  wrapper  gt  x000D       lt div class  hover  gt  lt  div gt  x000D       lt img src  http   placehold it 450x250    gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The new Grid CSS specification provides a far more elegant solution  Using position  absolute may lead to overlaps or scaling issues while Grid will save you from dirty CSS hacks   Most minimal Grid Overlay example   HTML   lt div class  container  gt     lt div class  content  gt This is the content lt  div gt     lt div class  overlay  gt Overlay - must be placed under content in the HTML lt  div gt   lt  div gt    CSS   container     display  grid      content   overlay     grid-area  1   1      That s it  If you don t build for Internet nbsp Explorer  your code will most probably work

User · Answer

By using a div with style z-index 1  and position  absolute  you can overlay your div on any other div   z-index determines the order in which divs  stack   A div with a higher z-index will appear in front of a div with a lower z-index  Note that this property only works with positioned elements

User · Answer

This is what you need    x000D   x000D  function showFrontLayer     x000D    document getElementById  bg mask   style visibility  visible   x000D    document getElementById  frontlayer   style visibility  visible   x000D    x000D  function hideFrontLayer     x000D    document getElementById  bg mask   style visibility  hidden   x000D    document getElementById  frontlayer   style visibility  hidden   x000D    x000D   bg mask   x000D    position  absolute  x000D    top  0  x000D    right  0   bottom  0  x000D    left  0  x000D    margin  auto  x000D    margin-top  0px  x000D    width  981px  x000D    height  610px  x000D    background   url  img dot white jpg   center  x000D    z-index  0  x000D    visibility  hidden  x000D     x000D   x000D   frontlayer   x000D    position  absolute  x000D    top  0  x000D    right  0  x000D    bottom  0  x000D    left  0  x000D    margin  70px 140px 175px 140px  x000D    padding   30px  x000D    width  700px  x000D    height  400px  x000D    background-color  orange  x000D    visibility  hidden  x000D    border  1px solid black  x000D    z-index  1  x000D     x000D   x000D   x000D   lt  style gt  x000D   lt html gt  x000D     lt head gt  x000D       lt META HTTP-EQUIV  EXPIRES  CONTENT  -1    gt  x000D   x000D     lt  head gt  x000D     lt body gt  x000D       lt form action  test html  gt  x000D         lt div id  baselayer  gt  x000D   x000D           lt input type  text  value  testing text   gt  x000D           lt input type  button  value  Show front layer  onclick  showFrontLayer      gt  Click  Show front layer  button lt br  gt  lt br  gt  lt br  gt  x000D   x000D          Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text x000D          Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text x000D          Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing textsting text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text Testing text x000D           lt div id  bg mask  gt  x000D             lt div id  frontlayer  gt  lt br  gt  lt br  gt  x000D              Now try to click on  Show front layer  button or the text box  It is not active  lt br  gt  lt br  gt  lt br  gt  x000D              Use position  absolute to get the one div on top of another div  lt br  gt  lt br  gt  lt br  gt  x000D              The bg mask div is between baselayer and front layer  lt br  gt  lt br  gt  lt br  gt  x000D              In bg mask  img dot white jpg 1 pixel in width and height  is used as background image to avoid IE browser transparency issue  lt br  gt  lt br  gt  lt br  gt  x000D               lt input type  button  value  Hide front layer  onclick  hideFrontLayer      gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  form gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

x000D   x000D   container   x000D    width  100px  x000D    height  100px  x000D    position  relative  x000D    x000D   navi  x000D   infoi   x000D    width  100   x000D    height  100   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    x000D   infoi   x000D    z-index  10  x000D    x000D   lt div id  container  gt  x000D     lt div id  navi  gt a lt  div gt  x000D     lt div id  infoi  gt  x000D       lt img src  https   appharbor com assets images stackoverflow-logo png  height  20  width  32    gt b x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I would suggest learning about position  relative and child elements with position  absolute

User · Answer

You need to add a parent with a relative position  inside this parent you can set the absolute position of your divs  lt div gt   lt ------Relative    lt div  gt   lt ------Absolute    lt div  gt   lt ------Absolute    lt div  gt   lt ------Absolute  lt div  gt   Final result  https   codepen io hiteshsahu pen XWKYEYb editors 0100   lt div class  quot container quot  gt     lt div class  quot header quot  gt TOP  I am at Top  amp  above of body container lt  div gt          lt div class  quot center quot  gt CENTER  I am at Top  amp  in Center of body container lt  div gt        lt div class  quot footer quot  gt BOTTOM  I am at Bottom  amp  above of body container lt  div gt   lt  div gt        Set HTML Body full width  html  body     overflow  hidden    width  100     height  100     margin  0    padding  0     After that  you can set a div with the relative position to take full width and height  container     position  relative    background-color  blue    height  100     width  100     border 1px solid    color  white    background-image  url  quot https   images pexels com photos 5591663 pexels-photo-5591663 jpeg auto compress amp cs tinysrgb amp dpr 2 amp h 750 amp w 1260 quot      background-color   cccccc     Inside this div with the relative position you can put your div with absolute positions On TOP above the container  header     position  absolute    margin-top  -10px    background-color   d81b60     left 0    right 0    margin 15px    padding 10px    font-size  large     On BOTTOM above the container  footer     position  absolute    background-color   00bfa5    left 0    right 0    bottom 0    margin 15px    padding 10px    color  white    font-size  large      In CENTER above the container  center     position  absolute    background-color   00bfa5    left   30     right  30     bottom 30     top  30     margin 10px    padding 10px    color  white    font-size  large

[html] How to overlay one div over another div

The Problem

Proposed Solution

CSS Position Required Knowledge

The Solution

The Result

An Alternate (Grid) Solution

An Alternate (No Wrapper) Solution

Examples related to html

Examples related to css

Examples related to position

Examples related to overlay