Space between divs and floating image

Question

I am making a portfolio website and I want to place two divs with little horizontal space between each other and a floating circle image in the center between them as so. The divs are the lighter ones. I was wondering how to style them and the image so that it floats betweet the divs with a little space. I've tried

img {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  z-index: 100;
}

div {
  z-index: 90;
}

Please help me style these. I have no other ideas

Answer 1

You can use position: absolute and z-index

 body { background: #BD9EA4; } div { width: 100%; height: 100px; position: relative; margin: 10px 0; background: #E6DADC; z-index: 1; } div:first-child { z-index: 2; } span { background: white; width: 100px; height: 100px; position: absolute; bottom: 0; border-radius: 50%; left: 50%; transform: translate(-50%, 50%); border: 2px solid black; box-shadow: 0 0 0 8px #E6DADC; } 

 <div><span></span></div> <div></div>