How would you make two div s overlap

Question

I need two divs to look a bit like this                           ---     LOGO        ------------------------                        LINKS                                CONTENT                           What s the neatest most elegant way of making them overlap neatly  The logo will have a fixed height and width and will be touching the top edge of the page

User · Answer

Using CSS  you set the logo div to position absolute  and set the z-order to be above the second div    logo       position  absolute      z-index  2000      left  100px      width  100px      height  50px

User · Answer

I might approach it like so  CSS and HTML      x000D   x000D  html  x000D  body   x000D    margin  0px  x000D    x000D   logo   x000D    position  absolute     Reposition logo from the natural layout    x000D    left  75px  x000D    top  0px  x000D    width  300px  x000D    height  200px  x000D    z-index  2  x000D    x000D   content   x000D    margin-top  100px     Provide buffer for logo    x000D    x000D   links   x000D    height  75px  x000D    margin-left  400px     Flush links  with a 25px  padding   right of logo    x000D    x000D   lt div id  logo  gt  x000D     lt img src  https   via placeholder com 200x100    gt  x000D   lt  div gt  x000D   lt div id  content  gt  x000D     x000D     lt div id  links  gt dssdfsdfsdfsdf lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using CSS  you set the logo div to position absolute  and set the z-order to be above the second div    logo       position  absolute      z-index  2000      left  100px      width  100px      height  50px

User · Answer

Just use negative margins  in the second div say    lt div style  margin-top  -25px   gt    And make sure to set the z-index property to get the layering you want

User · Answer

I might approach it like so  CSS and HTML      x000D   x000D  html  x000D  body   x000D    margin  0px  x000D    x000D   logo   x000D    position  absolute     Reposition logo from the natural layout    x000D    left  75px  x000D    top  0px  x000D    width  300px  x000D    height  200px  x000D    z-index  2  x000D    x000D   content   x000D    margin-top  100px     Provide buffer for logo    x000D    x000D   links   x000D    height  75px  x000D    margin-left  400px     Flush links  with a 25px  padding   right of logo    x000D    x000D   lt div id  logo  gt  x000D     lt img src  https   via placeholder com 200x100    gt  x000D   lt  div gt  x000D   lt div id  content  gt  x000D     x000D     lt div id  links  gt dssdfsdfsdfsdf lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using CSS  you set the logo div to position absolute  and set the z-order to be above the second div    logo       position  absolute      z-index  2000      left  100px      width  100px      height  50px

User · Answer

With absolute or relative positioning  you can do all sorts of overlapping  You ve probably want the logo to be styled as such   div logo     position  absolute    left  100px     or whatever     Note  absolute position has its eccentricities  You ll probably have to experiment a little  but it shouldn t be too hard to do what you want

User · Answer

Just use negative margins  in the second div say    lt div style  margin-top  -25px   gt    And make sure to set the z-index property to get the layering you want

User · Answer

Using CSS  you set the logo div to position absolute  and set the z-order to be above the second div    logo       position  absolute      z-index  2000      left  100px      width  100px      height  50px

User · Answer

I might approach it like so  CSS and HTML      x000D   x000D  html  x000D  body   x000D    margin  0px  x000D    x000D   logo   x000D    position  absolute     Reposition logo from the natural layout    x000D    left  75px  x000D    top  0px  x000D    width  300px  x000D    height  200px  x000D    z-index  2  x000D    x000D   content   x000D    margin-top  100px     Provide buffer for logo    x000D    x000D   links   x000D    height  75px  x000D    margin-left  400px     Flush links  with a 25px  padding   right of logo    x000D    x000D   lt div id  logo  gt  x000D     lt img src  https   via placeholder com 200x100    gt  x000D   lt  div gt  x000D   lt div id  content  gt  x000D     x000D     lt div id  links  gt dssdfsdfsdfsdf lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you want the logo to take space  you are probably better of floating it left and then moving down the content using margin  sort of like this     logo       float  left      margin  0 10px 10px 20px      content       margin  10px 0 0 10px      or whatever margin you want

User · Answer

With absolute or relative positioning  you can do all sorts of overlapping  You ve probably want the logo to be styled as such   div logo     position  absolute    left  100px     or whatever     Note  absolute position has its eccentricities  You ll probably have to experiment a little  but it shouldn t be too hard to do what you want

User · Answer

With absolute or relative positioning  you can do all sorts of overlapping  You ve probably want the logo to be styled as such   div logo     position  absolute    left  100px     or whatever     Note  absolute position has its eccentricities  You ll probably have to experiment a little  but it shouldn t be too hard to do what you want

User · Answer

If you want the logo to take space  you are probably better of floating it left and then moving down the content using margin  sort of like this     logo       float  left      margin  0 10px 10px 20px      content       margin  10px 0 0 10px      or whatever margin you want

User · Answer

Just use negative margins  in the second div say    lt div style  margin-top  -25px   gt    And make sure to set the z-index property to get the layering you want

User · Answer

If you want the logo to take space  you are probably better of floating it left and then moving down the content using margin  sort of like this     logo       float  left      margin  0 10px 10px 20px      content       margin  10px 0 0 10px      or whatever margin you want

User · Answer

With absolute or relative positioning  you can do all sorts of overlapping  You ve probably want the logo to be styled as such   div logo     position  absolute    left  100px     or whatever     Note  absolute position has its eccentricities  You ll probably have to experiment a little  but it shouldn t be too hard to do what you want

User · Answer

Just use negative margins  in the second div say    lt div style  margin-top  -25px   gt    And make sure to set the z-index property to get the layering you want

User · Answer

I might approach it like so  CSS and HTML      x000D   x000D  html  x000D  body   x000D    margin  0px  x000D    x000D   logo   x000D    position  absolute     Reposition logo from the natural layout    x000D    left  75px  x000D    top  0px  x000D    width  300px  x000D    height  200px  x000D    z-index  2  x000D    x000D   content   x000D    margin-top  100px     Provide buffer for logo    x000D    x000D   links   x000D    height  75px  x000D    margin-left  400px     Flush links  with a 25px  padding   right of logo    x000D    x000D   lt div id  logo  gt  x000D     lt img src  https   via placeholder com 200x100    gt  x000D   lt  div gt  x000D   lt div id  content  gt  x000D     x000D     lt div id  links  gt dssdfsdfsdfsdf lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If you want the logo to take space  you are probably better of floating it left and then moving down the content using margin  sort of like this     logo       float  left      margin  0 10px 10px 20px      content       margin  10px 0 0 10px      or whatever margin you want

[css] How would you make two <div>s overlap?

Examples related to css

Examples related to html

Examples related to overlap