使用 Flex 麻烦定位多个 Div

Question

一段时间以来我一直在努力解决这个问题，但一直没有成功。我正在尝试这样做：

我很难将 img 和文字放在一起。我正在使用 Position: Absolute 和 Position: Relative 但我似乎无法弄清楚我做错了什么。请帮帮我。这是它的样子：

这是我的代码。请让我知道我做错了什么！（我设置边框只是为了查看所有 containers/divs 的起始位置。这是为了组织目的，我会在修复此问题后删除它们。）（我也在使用内联样式）

...
<div style={{
          padding: "40px",
          width: "100vw",
          zIndex: "2"
        }}>
        <div
          className="container"
          style={{
            top: "50%",
            zIndex: "1",
          }}
        >
          <div className="row" style={{
              display: "flex",
              position: "relative",
              border: "green 5px solid"
          }}>
            <div className="col-sm-8">
              <img
                src="/Images/Img.JPG"
                style={{
                  width: "100%",
                  position: "absolute",
                  zIndex: "1"
                }}
              />
              <img
                src={OrangeBigSquare}
                style={{
                  width: "100%",
                  position: "absolute",
                  zIndex: "0",
                }}
              />
            </div>
            <div
              className="col-sm-4"
              style={{
                alignItems: "center",
                display: "flex",
                position: "absolute",
                zIndex: "10",
                border: "blue 1px solid"
              }}
            >
              <h1>Hi, i'm Shane and sometimes I do things.</h1>
            </div>
          </div>
        </div>
      </div>

Answer 1

我认为 flex 不是一个好的选择。既然你要自定义位置，那么改变元素的display没有意义。

这是一个实现您想要的结果的示例

body{
margin:0;
background-color:grey;
}
img{
z-index:1;
width:50vw;
height:50vh;
position:absolute;
top:15%;
left:2%;
}
h1{
position:absolute;
left:55vw;
width:35vw;
top:20vh;
z-index:2;
line-height:1.5em;
font-size: calc(5vw );
text-decoration: underline;
  text-decoration-color: blue;
}

<img src='https://images.pexels.com/photos/414102/pexels-photo-414102.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'>
<h1>Hi, i'm Shane and sometimes I do things.</h1>

Answer 2

好的，在这里用 flex 做了一些非常快速的事情，但我想你可以理解这个想法：

https://codesandbox.io/s/xenodochial-night-pr5p3i?file=/src/App.js

编辑：

改进版本：

https://codesandbox.io/s/unruffled-browser-05lk97?file=/src/App.js

使用 Flex 麻烦定位多个 Div

Positioning multiple Divs with Flex trouble

css

reactjs

flexbox

position