一段時間以來，我一直在努力解決這個問題，但沒有任何運氣。我正在嘗試這樣做：
我很難將 img 和 text 放在一起。我正在使用 Position:Absolute 和 Position:Relative 但我似乎無法弄清楚我做錯了什么。請幫幫我。這是它的樣子：
這是我的代碼。請讓我知道我做錯了什么！（我設定邊界只是為了查看所有容器/div 從哪里開始。這是出于組織目的，在我解決這個問題后我會擺脫它們。）（我也在使用行內樣式）
...
<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>
uj5u.com熱心網友回復：
好的，在這里用 flex 做了一些超級快的事情，但我認為你可以明白：
https://codesandbox.io/s/xenodochial-night-pr5p3i?file=/src/App.js
編輯：
改進版：
https://codesandbox.io/s/unruffled-browser-05lk97?file=/src/App.js
uj5u.com熱心網友回復：
我不認為 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/453118.html