将div放在两个div之间的边界顶部[重复]

Posted 2023-03-05

【中文标题】将div放在两个div之间的边界顶部[重复]

【英文标题】：Place div on top of boundary between two divs [duplicate]

【发布时间】：2020-09-08 09:14:15

【问题描述】：

我试图将箭头放在两个 div 中间的顶部，如下图所示：link。

下面的代码不起作用，我正在尝试使其与 position : absolute ; 一起使用，但我不知道如何。

.section1 
  background-color: lightgray;
  text-align: center;
  padding: 100px;


.content 
  display: inline-block;


.section1 .separator 
   margin: 0 auto;
   position: absolute; /* XXX this does something weird */
   bottom: 0;


.section2 
  height: 200px;
  background-color: coral;

<div class="section1">
  <div class="content">
    Hello, world!
  </div>
  <div class="separator">
    ▼
  </div>
</div>
<div class="section2">
  <div class="content">
    Hello, world!
  </div>
</div>

【问题讨论】：

我会考虑使用绝对定位将其与容器底部对齐，然后使用 CSS transform: translate 将其向下移动 50% 的高度。

【参考方案1】：

首先：您需要使section1 使用相对定位，以便separator 相对于它的容器。

然后你可以将它定位在底部中心：

bottom: 0;
left: 50%;

最后，将它向左平移 50%（使其中心与容器中心对齐）并向下平移 50%（因此它是容器的一半），使用：

transform: translate(-50%, 50%);

工作示例：

.section1 
  background-color: lightgray;
  text-align: center;
  padding: 100px;
  
  /* This makes sure the separator is positioned relative to the correct element */
  position: relative;


.content 
  display: inline-block;


.section1 .separator 
  position: absolute;
  
  /* Position the element in the center bottom */
  bottom: 0;
  left: 50%;
  
  /* Translate it the the offset position */
  transform: translate(-50%, 50%);


.section2 
  height: 200px;
  background-color: coral;

<div class="section1">
  <div class="content">
    Hello, world!
  </div>
  <div class="separator">
    ▼
  </div>
</div>
<div class="section2">
  <div class="content">
    Hello, world!
  </div>
</div>