停止文本覆盖重叠的弹性框答案

【问题标题】：Stop flex boxes with text overlays overlapping停止文本覆盖重叠的弹性框
【发布时间】：2017-02-15 16:03:19
【问题描述】：

我正在尝试创建几个具有以下行为的弹性框... 1) Flex box 1 以更宽的屏幕分辨率显示带有文本的图像 2) Flex box 2 以更宽的屏幕分辨率显示带有文本的图像 3) Flex box 1 和 2 都在图像顶部覆盖文本以实现较小的屏幕分辨率

到目前为止，我的以下代码适用于场景 1) 和 2)。但是，对于场景 3)，当我希望它们堆叠在一起时，带有文本覆盖的图像会相互重叠。

任何关于如何解决的建议将不胜感激。

谢谢彼得

.imgtxtrow {
  display: flex;
  position: relative; 
}

.imgtxtcol {
  display: flex;
  position: relative; 
  flex-direction: column;
}

.subitem {
  width: 50%;
}

img {
  width: 100%;
}

.text {
  padding: 25px;
}

@media screen and (max-width: 750px) {
.subitem {
  position: absolute;
}

<html>

	<head>
		<link rel="stylesheet" href="test.css">
	</head>

	<body>

		<div class="imgtxtrow">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

		<div style="clear:both"></div>	
		
		</br></br>

		<div class="imgtxtcol">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

	</body>

</html>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

非常简单，有一点定位。您在媒体查询中定位了错误的元素。

.imgtxtrow {
  display: flex;
  position: relative; 
}

.imgtxtcol {
  display: flex;
  position: relative; 
  flex-direction: column;
}

.subitem {
  width: 50%;
}

img {
  width: 100%;
}

.text {
  padding: 25px;
}

@media screen and (max-width: 750px) {
.text {
  padding: 25px;
  position: absolute;
  bottom: 0;
  left: 0;
}
  
}

<html>

	<head>
		<link rel="stylesheet" href="test.css">
	</head>

	<body>

		<div class="imgtxtrow">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

		<div style="clear:both"></div>	
		
		</br></br>

		<div class="imgtxtcol">
			<div class="subitem">
				<div class="picture">		
					<img src="https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_1280.jpg">
				</div>
			</div>
			<div class="subitem">
				<div class="text">		
					<h3>Some Text</h3>			
				</div>
			</div>
		</div>

	</body>

</html>

【讨论】：

感谢 Serg，这正是我想要实现的目标 :-)
有没有办法让文字与右下角对齐？当我设置 CSS 底部时：0；右：0；文字从图片中消失了？
我会说使用我的代码但添加宽度：100%;文本对齐：右；