父背景中的背景升起

Question

我想让孩子div上升一点。（没有位置属性）父div有背景颜色。请看图像。

我尝试过这段代码。但没有运气。

.parent {
  background: #3498db;
}

.child {
  background: #34495e;
  margin-top: -100px;
}

<div class="parent">
  <div class="child"></div>
</div>

任何解决方案？

Answer 1

您可以使用transform;

.child { transform: translateY(-100px); }

也允许相对单位

Answer 2

见：

＆＃13;

＆＃13;

.parent {
  background: #3498db;
  width: 100%;
  height: 300px;
  text-align: center;
  display: inline-block;
  margin-top: 60px;
}

.child {
  display: block;
  background: #34495e;
  margin: -60px auto 0;
  width: 200px;
  height: 200px;
}

＆＃13;

<div class="parent">
  <div class="child"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请试试这个，

.parent {
  background: #3498db;
  width:100%;
  height:500px;
  margin:100px auto 0; 
}

.child {
  background: #34495e;  
  width:200px;
  height:300px;
  margin:0 auto;
  position:relative;
  top:-100px;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 4

使用CSS属性SELECT * FROM JOBCARD JC JOIN JOBS J ON JC.job_ID = J.job_ID WHERE J.Status = 'jobDone' 并查看下面的工作代码段：

select * from jobs where Status='jobDone'

transform