时间戳

首页 > 解决方案 > 使用顶部位置会影响整个页面

html - 使用顶部位置会影响整个页面

问题描述

我有一个页面，顶部有一个有角度的 DIV，DIV紧接着有一个有角度的 DIV。我不得不偏移两个顶部的位置，DIVs以便它们连接在一起。唯一的问题是这些下面的下一个有一个偏移量DIV大小的空间。120px

我可以将此应用于每个 DIV，但对页脚执行此操作意味着页面底部有空白区域。

.top {
  min-width: 100%;
  min-height: 400px;
  background: linear-gradient(45deg, #FF0000, #00FF00);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}

.main {
  min-width: 100%;
  min-height: 600px;
  background: #0000FF;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  position: relative;
  top: -120px;
}

.next {
  min-width: 100%;
  min-height: 600px;
  background: #000000;
}
<div class="top"></div>
<div class="main"></div>
<div class="next"></div>

任何使黑色DIV从蓝色底部开始并且页面其余部分不受影响的想法将不胜感激，您不能简单地top: -120px;在每个 DIV 上使用，因为120px页面底部有空白空间。

标签： htmlcss

解决方案

可以通过margin-top改变top，对元素效果一样，之后的正常流程也是一样的

.top {
  min-width: 100%;
  min-height: 400px;
  background: linear-gradient(45deg, #FF0000, #00FF00);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}

.main {
  min-width: 100%;
  min-height: 600px;
  background: #0000FF;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  position: relative;
  margin-top: -120px;
}

.next {
  min-width: 100%;
  min-height: 600px;
  background: #000000;
}
<div class="top"></div>
<div class="main"></div>
<div class="next"></div>

推荐阅读