1

我已经.box2为其工作提供了负边距，但其中的内部 div.slide不工作我希望 .slide 移动到 .box2 上方。

这是我尝试过的jsfiddle链接，请提出一些想法。在此处输入链接描述

这可能与保证金本身有关，而不是与顶部有关吗？如果不可能，请指出。

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
}
.slide
{
  max-width:200px;
  margin:-25px auto 0 auto;
  height:60px;
  background:orange;
}
.slide1{
  float:left;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

4

3 回答 3

1

您可以使用 CSS 位置属性：

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
   position: relative;
  z-index: 1;
}
.slide
{
  max-width:200px;
  height:60px;
  background:orange;
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.slide1{
  float:left;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"><p> I want this div above than the red div</p ></div>
    </div>
  </div>
</body>
</html>

于 2019-04-09T09:16:18.907 回答
1

我认为这个问题可能与利润崩溃有关。

父级和第一个/最后一个子
级 如果没有创建边框、填充、内联部分、块格式化上下文或间隙将块的边距顶部与其第一个子块的边距顶部分开......然后这些边距折叠. 折叠的边距最终在父级之外。

在父子之间添加某种间隙可以防止崩溃。
这里有一些方法：

填充

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  padding-top: 1px;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}
<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

边界

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
  border-top: 1px solid transparent;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}
<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

伪元素

.full-width {
  width: 100%;
  padding: 0;
  margin: 0;
}

.box-width {
  max-width: 500px;
  margin: 0 auto;
  height: 150px;
  background: yellow;
}

.box2 {
  max-width: 400px;
  margin: -30px auto 0 auto;
  height: 150px;
  background: red;
}

.box2:before,
.box2:after {
  content: ' ';
  display: table;
}

.slide {
  max-width: 200px;
  margin: -25px auto 0 auto;
  height: 60px;
  background: orange;
}
<div class="full-width">
  <div class="box-width">
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
    <div class="slide1"></div>
  </div>
</div>
<div class="full-width">
  <div class="box2">
    <div class="slide">
      <p> I want this div above than the red div</p>
    </div>
  </div>
</div>

于 2019-04-09T09:31:39.687 回答
0

试试这个

.slide {
    max-width: 200px;
    margin: -25px auto 0 auto;
    height: 60px;
    background: orange;
    position: relative;
    top: -50px;
}
于 2019-04-09T09:06:41.377 回答