html突然出现两个相同的元素,html - 如何在其他两个html元素之间的公共边界上显示一个html元素？ - 堆栈内存溢出...

我想在其他两个元素(在我的情况下是输入框)的公共边框上显示一个HTML元素(在我的情况下是带有一对箭头的交换按钮)。 但是我的交换按钮转到页面的开始。

的HTML

display: "flex",

flexFlow: "row",

justifyContent: "center",

alignItems: "center"

}}>

{/* origin input */}

style={{

marginTop: this.state.marginTop,

border: "1px solid rgb(36, 2, 2)"

}}

>

ORIGIN OF SHIPMENT

{/* swap button */}

type="default"

size="small"

className={[this.state.css, "swap-button"]}

shape="circle"

onClick={this.onSwapLocation}

>

{/* destination input */}

DESTINATION OF SHIPMENT

name="destination"

placeholder="DESTINATION OF SHIPMENT"

/>

的CSS

.swap-button {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

z-index: 100;

background-color: var(--whiteColor);

color: var(--blueColor);

}

预期的交换按钮图片：[

2 ：

实际的交换按钮图像： ：

感谢您的答复。 谢谢。

Edit01：我只想在其他两个输入框上显示该交换按钮。 我已经写了HTML和CSS。 但是当我使用position：absolute时，交换按钮将启动。 我想我需要一些CSS帮助(即.swap-button类)