div 重叠，我正在尝试使用边距顶部：100px;但我觉得这不是最好的方法

Question

我有两个重叠的div，顶部的文本是position:absolute；因为有z索引，在添加第二个div之后，它们重叠了！！

[1] ：https://i.stack.imgur.com/kUDSm.jpg"2 DIV"

.content .box{
	width: 400px;
	height:400px;
	border-radius: 10%;
	transform: rotate(-15deg);
	-webkit-transform: rotate(-15deg);
	-moz-transform: rotate(-15deg);
	-ms-transform: rotate(-15deg);
	-o-transform: rotate(-15deg);
	background-color: white;
	float: left;
	margin-left: 50px;
	margin-top: -80px;
	float: left;
	position: relative;
	z-index: -2;
}
.content h1 {
	transform: rotate(15deg);
	-webkit-transform: rotate(15deg);
	-moz-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	-o-transform: rotate(15deg);
	font-family: 'Nexa light';
	font-size: 25px;
	margin-left: 60px;
	margin-top: 70px;
}
.content h1:after {
	content: "";
	display: block;
	border-bottom: 10px solid #f2d44b;
	width: 280px;
	margin-top: -15px;
}
.content > p {
	display: block;
	position: absolute;
	z-index: 2;
	margin-top: 50px;
	margin-left: 75px;
	text-align: justify;
	line-height: 35px;
	font-family: 'Nexa light';
	font-size: 1em ;
	padding-right: 75px;
	border:2px solid red;
}
.milestone {
	margin-top: 250px;
	width: 100%;
	height: 485px;
	background: linear-gradient(rgba(42,39, 61, 0.5), rgba(42, 39, 61, 0.5)),url('_2/BG.jpg') ;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;	float: left;
}
.milestone .left{
	float: left;
	width: 2px;
	height: 100%;
	background-color: rgba(255,255,255,0.2);
	margin-left: 100px;
	position: absolute;
}
.milestone .left img {
	position: relative;
	top: 12%;
	left: -20px;
	width: 39px;
	height: 40px;
}
.milestone .right ul {
	float: left;
	display: table;
	float: left;
	color: white;
	margin-left: 100px;
	margin-top: 10%;
}
.milestone .right ul li {
	list-style: none;
}
.milestone .right ul li:nth-child(1) {
	font-family: 'Nexa bold';
	font-size: 35px;
}
.milestone .right ul li:nth-child(2) {
	color: #f2d44b;
	font-family: 'Nexa light';
	font-size: 15px;
	text-align: left;
}
.milestone .right ul li:nth-child(3) {
	font-family: 'Nexa light';
	font-size: 15px;
	width: 550px;
	line-height: 30px;
	float: left;
	text-align: justify;
}

<div class="container">
<div class='content'>
		<div class='box'><h1>What’s Kidney Rejection</h1></div>
		<p>
			Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
		</p>
</div>
<div class='milestone '>
	<div class="right">
		<ul>
		<li col-sm-4><h3>Milestone 1 progress 1/6/2017 to 31/10/2017</h3></li>
		<li ><p>Milestone name of title</p></li>
		<li class='col-md-12 col-sm-4'><p>The project has started in June 2017, and is expected to be completed in two years. The project deliverables include the fully-functioning system prototype with the recommended hardware setup and user’s manual, as well as the full software stack and APIs.</p></li>
	</ul>
	</div>
	<div class="left">
		<img src="number.png">
	</div>
</div> 
</div>

我有两个重叠的div，顶部的文本是position: absolute;，因为有z-index添加第二个div后，它们重叠了！！

[1] ：https://i.stack.imgur.com/kUDSm.jpg"2 DIV">

Answer 1

我不确定您想要的HTML结构。但是我可以看到有很多CSS样式的问题。我已经尝试清除那些似乎与我无关的风格，现在所有元素都开始占据相关的空间。请告诉你的要求你正在努力实现什么。

.content .box {
width: 400px;
height: 400px;
border-radius: 10%;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
background-color: white;
margin-left: 50px;
}
.content h1 {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
font-family: 'Nexa light';
font-size: 25px;
margin-left: 60px;
margin-top: 70px;
}
.content h1:after {
content: "";
display: block;
border-bottom: 10px solid #f2d44b;
width: 280px;
margin-top: -15px;
}
.content>p {
display: block;
z-index: 2;
margin-top: 50px;
margin-left: 75px;
text-align: justify;
line-height: 35px;
font-family: 'Nexa light';
font-size: 1em;
padding-right: 75px;
border: 2px solid red;
}
.milestone {
margin-top: 250px;
width: 100%;
height: 485px;
background: linear-gradient(rgba(42, 39, 61, 0.5), rgba(42, 39, 61, 0.5)), url('_2/BG.jpg');
background-position: center;
background-attachment: fixed;
background-size: cover;
}
.milestone .left {
float: left;
width: 2px;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
margin-left: 100px;
}
.milestone .left img {
width: 39px;
height: 40px;
}
.milestone .right ul {
float: left;
color: white;
margin-left: 100px;
margin-top: 10%;
}
.milestone .right ul li {
list-style: none;
}
.milestone .right ul li:nth-child(1) {
font-family: 'Nexa bold';
font-size: 35px;
}
.milestone .right ul li:nth-child(2) {
color: #f2d44b;
font-family: 'Nexa light';
font-size: 15px;
text-align: left;
}
.milestone .right ul li:nth-child(3) {
font-family: 'Nexa light';
font-size: 15px;
width: 550px;
line-height: 30px;
float: left;
text-align: justify;

<div class="container">
<div class='content'>
<div class='box'>
<h1>What’s Kidney Rejection</h1>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class='milestone '>
<div class="right">
<ul>
<li col-sm-4>
<h3>Milestone 1 progress 1/6/2017 to 31/10/2017</h3>
</li>
<li>
<p>Milestone name of title</p>
</li>
<li class='col-md-12 col-sm-4'>
<p>The project has started in June 2017, and is expected to be completed in two years. The project deliverables include the fully-functioning system prototype with the recommended hardware setup and user’s manual, as well as the full software stack
and APIs.</p>
</li>
</ul>
</div>
<div class="left">
<img src="number.png">
</div>
</div>
</div>

Answer 2

到目前为止，您的div没有重叠。请检查下面的片段。

.content .box {
width: 400px;
height: 400px;
border-radius: 10%;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
background-color: white;
margin-left: 50px;
margin-top: -80px;
float: left;
position: relative;
z-index: -2;
}
.content h1 {
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
-o-transform: rotate(15deg);
font-family: 'Nexa light';
font-size: 25px;
margin-left: 60px;
margin-top: 70px;
}
.content h1:after {
content: "";
display: block;
border-bottom: 10px solid #f2d44b;
width: 280px;
margin-top: -15px;
}
.content>p {
display: block;
z-index: 2;
margin-top: 50px;
margin-left: 75px;
text-align: justify;
line-height: 35px;
font-family: 'Nexa light';
font-size: 1em;
padding-right: 75px;
border: 2px solid red;
}
.milestone {
margin-top: 250px;
width: 100%;
height: 485px;
background: linear-gradient(rgba(42, 39, 61, 0.5), rgba(42, 39, 61, 0.5)), url('_2/BG.jpg');
background-position: center;
background-attachment: fixed;
background-size: cover;
float: left;
}
.milestone .left {
float: left;
width: 2px;
height: 100%;
background-color: rgba(255, 255, 255, 0.2);
margin-left: 100px;
position: absolute;
}
.milestone .left img {
position: relative;
top: 12%;
left: -20px;
width: 39px;
height: 40px;
}
.milestone .right ul {
float: left;
display: table;
float: left;
color: white;
margin-left: 100px;
margin-top: 10%;
}
.milestone .right ul li {
list-style: none;
}
.milestone .right ul li:nth-child(1) {
font-family: 'Nexa bold';
font-size: 35px;
}
.milestone .right ul li:nth-child(2) {
color: #f2d44b;
font-family: 'Nexa light';
font-size: 15px;
text-align: left;
}
.milestone .right ul li:nth-child(3) {
font-family: 'Nexa light';
font-size: 15px;
width: 550px;
line-height: 30px;
float: left;
text-align: justify;
}

<div class="container">
<div class='content'>
<div class='box'>
<h1>What’s Kidney Rejection</h1>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release
of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class='milestone '>
<div class="right">
<ul>
<li col-sm-4>
<h3>Milestone 1 progress 1/6/2017 to 31/10/2017</h3>
</li>
<li>
<p>Milestone name of title</p>
</li>
<li class='col-md-12 col-sm-4'>
<p>The project has started in June 2017, and is expected to be completed in two years. The project deliverables include the fully-functioning system prototype with the recommended hardware setup and user’s manual, as well as the full software stack
and APIs.</p>
</li>
</ul>
</div>
<div class="left">
<img src="number.png">
</div>
</div>
</div>