Question

在中等设备上，第二列的hello 2位于Hello1下方。

第2节不会按照相对定位的元素移动，因此它会被Hello2重叠。我不想使用background-image url，并且想使用image src解决此问题。第2节应从第二个col-md-6内容的结尾处开始有可能。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<style type="text/css">
		.header img {
		width: 100%;
		height: 83vh;
		}
		.header {
			position: relative;
		}
		.header-content {
			position: absolute;
			top: 20px	
		}
		h1 {
			color: steelblue;
		}
	</style>
</head>
<body>

<div class="header">
	<img src="https://i.imgur.com/kdsPrQt.jpg">
</div>
<div class="header-content">
	<div class="col-md-6">
		<h1>Hello1</h1>
		<h1>Hello1</h1>
		<h1>Hello1</h1>
		<h1>Hello1</h1>
		<h1>Hello1</h1>
		<h1>Hello1</h1>
    </div>
    <div class="col-md-6">
    	<h1>Hello2</h1>
    	<h1>Hello2</h1>
    	<h1>Hello2</h1>
    	<h1>Hello2</h1>
    	<h1>Hello2</h1>
    	<h1>Hello2</h1>
    	<h1>Hello2</h1>
    </div>
</div>

<section>
	<h2>This is section 2</h2>
</section>

</body>
</html>

如何解决绝对位置元素重叠的问题

0 个答案: