使孩子的身高比父母高

Question

不确定我是否认为这是完全错误的方式，但我会非常感谢一些指导。我基本上试图让一个比他父母更大的孩子。

请参阅图片了解我想要实现的目标

然而，容器元素的高度会更小。我是否正确地认为我应该将它们作为单独的元素或者是否有更好的实践方法？

Answer 1

您可以使用position来实现您想要的效果。我会说，position，否定margin的组合可以解决问题：

.parent {background-color: #000; height: 100px;}
.parent .child {height: 200px; background-color: #ccc; width: 75%; margin: auto;}

.parent {margin-top: 100px;}
.parent .child {position: relative; top: -50%;}

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

预览

如果您不知道内容的高度，可以使用translate将其修复为居中：

.parent {background-color: #000; width: 75%; margin: auto;}
.parent .child {height: 200px; background-color: #fff; width: 75%; margin: auto;}

.parent {margin-top: 100px; position: relative; min-height: 100px;}
.parent .child {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);}

Answer 2

只需transform: scale(1.2);您的子元素

#parent{
  margin: 40px;
  background:#000;
}
#child{
  background:#d8d8d8;
  height:140px;
  box-shadow: 0 0 40px rgba(0,0,0,0.2);
  position:relative;
  margin:0 auto;
  width:60%;
  transform:scale(1.2); -webkit-transform:scale(1.2);
}

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