css - 如何从该固定 div 的下方开始内容？

Question

我有一个位置固定的div，显示在右侧。我有很多内容，这些内容应该从固定 div 下面开始。

当我设置固定 div 时，是否有任何选项让内容始终从固定 div 下方开始？

.parent_img{
	position: fixed;
	right: 0;
}
.content, .content_2, .content_3{
	width: 700px;
}

<div class="parent_img">
	<img src="http://www.davidhill.co/wp-content/uploads/Free.jpg">
</div>

<div class="content">
	<h2>This is just for testing</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div class="content_2">
	<h2>This is just for testing 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="content_3">
	<h2>This is just for testing 3</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--many more-->

我正在获取输出。

我需要这样的输出

Answer 1

只需使用该固定 div 的高度值(= 图像的高度)作为第一个内容 DIV 的 margin-top。

在你的例子中，图像是 260px 高，所以使用:

.content {
  margin-top: 260px;
}

在下面的片段中，我实际上添加了 20px 以创建更多距离。我还向固定 DIV 添加了一些其他设置(见下文)，以便在向上滚动时内容不会在图像的左侧或右侧保持部分可见。

.parent_img{
	position: fixed;
	right: 0;
  top: 0;
  width: 100%;
  background: #fff;
  text-align: right;
}
.content, .content_2, .content_3{
	width: 700px;
}
.content {
  margin-top: 280px;
}

<div class="parent_img">
	<img src="http://www.davidhill.co/wp-content/uploads/Free.jpg">
</div>

<div class="content">
	<h2>This is just for testing</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


<div class="content_2">
	<h2>This is just for testing 2</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

<div class="content_3">
	<h2>This is just for testing 3</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--many more-->