堆叠 div 的相对和绝对位置

Question

我在尝试进行布局时遇到了很多麻烦。我试图让一个框与图像重叠，我试图使用绝对/相对位置，但我认为我做错了。 here is the layout

这是我目前的代码：

   .trabalhos{
	position: relative;
	margin-top: 100px;
	width: 100%;
	max-width: 960px;
    }
    
    .caixa{
	position: absolute;
	left: 0%;
	top: auto;
	right: auto;
	bottom: 10%;
	overflow: visible;
	width: 30%;
	height: auto;
	padding: 25px;
	border-radius: 10px;
	background-color: #333;
	color: white;
    }
    
    #trabalhos-img-right{
	float: right;
    }

    #trabalhos-img-left{
	float: left;
    }

    #esquerda{
	text-align: right;
    }

    #direita{
	text-align: left;
	right: 0%;
	left: auto;
    }

<div class="section-trabalhos">
		<div class="container">
			<h1>blablablablabla</h1>

			<div class="trabalhos">
				<div><img id="trabalhos-img-right" src="img-01.png"></div>
				<div class="caixa" id="esquerda">
					<h2>Lorem ipsum</h2>
					<p>blablabla</p>
				</div>
			</div>

			<div class="trabalhos trabalhos_2">
				<div><img id="trabalhos-img-left" src="img-01.png"></div>
				<div class="caixa" id="direita">
					<h2>Lorem ipsum</h2>
					<p>blablabla</p>
				</div>
			</div>



 

我必须做 8 个，最好的方法是什么？

提前致谢

Answer 1

我希望我已经解决了这个问题

<html>
<head>



<style>

    .trabalhos{
        width:100%;
        max-width: 960px;
        height: 60%;
        margin-top: 100px;
        position: relative;
    }

    .img{
        width:80%;
        height: 100%; /*Do not change it*/
    }

    .caixa{
        position: absolute;
        bottom:10%;
        overflow: visible;
        width: 30%;
        height: auto;
        padding: 25px;
        border-radius: 10px;
        background-color: #333;
        color: white;
    }




#trabalhos-img-right{
    float: right;
}

#trabalhos-img-left{
    float: left;
}

#esquerda{
    text-align: right;
    left: 0px    
}

#direita{
    text-align: left;
    right: 0px;
}  

    #trabalhos-img{
        width: 100%; /*Do not change it*/
        height: 100%; /*Do not change it*/
    }        


</style>

</head>



<body>

    <div class="trabalhos">

        <div id="trabalhos-img-right" class="img">
          <img id="trabalhos-img" src="img-01.png" /></div>
        <div class="caixa" id="esquerda">
            <h2>Lorem ipsum</h2>
            <p>blablabla</p>
        </div>
    </div>

     <div class="trabalhos">

        <div id="trabalhos-img-left" class="img">
          <img id="trabalhos-img" src="img-01.png" /></div>
        <div class="caixa" id="direita">
            <h2>Lorem ipsum</h2>
            <p>blablabla</p>
        </div>
    </div>


</body>

Answer 2

This CodePen 可能是解决方案。只需将 html 和 css 代码中的 svg 元素替换为您的图像即可。

另外，this 网站可以帮助您了解 position 属性。

HTML

<div class="container">
  <svg width="400" height="110">
    <rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
  </svg>
  <div class="description">
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </div>
</div>

<div class="containersecond">
  <svg width="400" height="110">
    <rect width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;"/>
  </svg>
  <div class="description">
    <h1>Lorem Ipsum</h1>
    <h2>Lorem ipsum dolor sit amet</h2>
  </div>
</div>

CSS

svg {
  position: relative;
  left: 30px;
}

.description {
  background-color: red;
  width: 300px;
  position: absolute;
  top: 70px;
}

.containersecond {
  position: absolute;
  top: 300px;
}