Question

我想在不修改第二个位置的情况下将元素放在另一个元素之上。我的意思是：

.container {
	display: flex;
	align-content: baseline;
	padding: 50px;
	width: 50px;
	height: 50px;
	background-color: blue;
}

.base {
  color: black;
}

.top {
  color: red;
}

<div class="container">
  <div class="base">
    base
    <div class="top">
      should be on top
    </div>
  </div>
</div>

我希望将should be on top div放在base div之上，并且base div仍然按照它的方式对齐。我尝试过使用相对定位并给出负底值，但不是那么敏感。这就是我想要它们的方式，除了base应该保留以前的位置：

    .container {
    	display: flex;
    	align-content: baseline;
    	padding: 50px;
    	width: 50px;
    	height: 50px;
    	background-color: blue;
    }

    .base {
      color: black;
    }

    .top {
      color: red;
    }

<div class="container">
  <div class="top">
    should be on top
    <div class="base">
      base
    </div>
  </div>
</div>

should be ontop div必须位于base之上，base之前的位置。我怎么能这样做？
这就是我的尝试：

    .container {
    	display: flex;
    	align-content: baseline;
    	padding: 50px;
    	width: 50px;
    	height: 50px;
    	background-color: blue;
    }

    .base {
      color: black;
    }

    .top {
      position: relative;
      color: red;
      bottom: 4.8em;
    }

    <div class="container">
      <div class="base">
        base
        <div class="top">
          should be on top
        </div>
      </div>
    </div>

这就是我希望它们被放置的方式。但是如果should be ontop div的行数改变，那么它会溢出base div。我认为可以使用js完成，但我更喜欢它只用于css。有没有办法做到这一点？

Answer 1

看起来我误解了这个问题。我已更新答案以反映这些变化。

父div的位置必须为relative，而内部div的位置必须为absolute。所以above div成为＆＃34;绝对＆＃34;相对于base div。

现在您需要指定＆＃34;以上＆＃34;你需要div，因为没有其他方法可以从流中删除元素并将其放在其他位置。（除非您使用javascript）

以下是您的代码的外观：

＆＃13;

.container {
	display: flex;
	align-content: baseline;
	padding: 50px;
	width: 50px;
	height: 50px;
	background-color: blue;
}

.base {
  position: relative;
  color: black;
}

.above {
  position: absolute;
  top: -60px;
  color: red;
}

＆＃13;

<div class="container">
  <div class="base">
    base
    <div class="above">
      should be above
    </div>
  </div>
</div>

＆＃13;

Answer 2

如果我理解正确，这就是你想要的：

.container {
    	display: flex;
    	align-content: baseline;
    	padding: 50px;
    	width: 50px;
    	height: 50px;
    	background-color: blue;
      position: relative;
      justify-content: center;
      position: rela
    }

    .base {
      color: black;
    }

    .top {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      margin: auto;
      color: red;
      bottom: 4.8em;
      text-align: center;
    }

<div class="container">
      <div class="base">
        base
        <div class="top">
          should be on top
        </div>
      </div>
    </div>

我向justify-content: center元素添加了align-items: center和.container属性，因此.base元素始终居中。
我将absolute定位添加到.top元素，因此它始终位于顶部。我还将relative定位添加到.container，因此绝对位置og .top元素基于.container的位置。这就是绝对定位的工作原理（它相对于第一个定位不同于static的元素）。
我将text-align: center添加到.top，因此文字居中。

您可以尝试向.top元素添加更多行，以查看这是否是预期行为。

Answer 3

最后，我找到了一种方法来做到这一点。它不是最好的CSS代码，但至少它做了诀窍。

.container {
    display: flex;
    align-content: baseline;
    padding: 50px;
    width: 50px;
    height: 50px;
    background-color: blue;
}
.base {
    position: relative;
    color: black;
}

.top-container {
  height: 0;
  padding: 0;
  position: absolute;
  top: 0;
}

.top {
  position: absolute;
  color: red;
  bottom: 0;
}

<div class="container">
      <div class="base">
        base
        <div class="top-container">
          <div class="top">
            should be on top
          </div>
        </div>
      </div>
    </div>

我在top-container div中创建了base height＆amp;＆amp; top = 0，所以当我在bottom: 0 div中top时，无论它们有多大，它都放在base之上。希望它适用于其他所有人。任何改进都值得赞赏:)

如何将元素放在另一个元素之上

3 个答案: