div和浮动图像之间的空间

Question

我正在制作一个投资组合网站，我想将两个div放置在彼此之间几乎没有水平空间的位置，并在它们之间的中心放置一个浮动的圆形图像。 div较轻。 我想知道如何对它们和图像进行样式设置，以使其在divs上散布一些空间。 我试过了

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

div {
  z-index: 90;
}

请帮我样式这些。 我没有其他想法

Answer 1

您可以使用position: absolute和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>