Question

我有一个Codepen link我有一个绝对定位的div，它有两个孩子。

我试图将一个孩子移到div的顶部，而另一个孩子移到底部，但不能用bottom:0和top:0来解决这个问题。我也尝试仅使用其中一个元素的内容宽度，而不是父元素的整个宽度。

Answer 1

做了一些CSS调整 - 你很接近！只需要position: absolute正确的元素以及top和bottom以及position: relative父元素。

通过这样做，元素的宽度将自动限制为其内容。

查看我的评论，了解添加和删除的内容。

html,
body {
  height: 100%;
  width: 100%;
  box-style: border-box;
  margin: 0px
}
.event-page {
  width: 100%;
  height: 100%
}
.event-page-header {
  position: relative;
  height: 450px;
  max-height: 70vh;
  padding: 0 0 1.75rem;
  width: 100%;
}
.event-page-header .event-header-content {
  width: 100%;
  height: 100%;
  /*position: absolute; // removed */
  z-index: 200;
  padding: 0 20px;
  /*bottom: 0; // removed */

  /* added 1 line: */
  position: relative;
}
.event-type-label {
  background: rgba(161, 178, 166, .8);
  border-radius: 2px;
  overflow: hidden;
  font-family: Lato;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  font-size: 0.8em;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1;
  padding: 5px;

  /* added 2 lines: */
  position: absolute;
  top: 0;
}
.event-header-title {
  color: #fff;
  font-family: Lato;
  font-size: 3em;
  font-weight: 300;
  line-height: 120%;
  margin: .5rem 0;

  /* added 2 lines: */
  position: absolute;
  bottom: 0;
}
.event-header-image {
  background: red;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100;
}
@media (min-width: 769px) {
  .event-header-image::after {
    background: linear-gradient(rgba(65, 77, 87, 0), rgba(65, 77, 87, .7));
    bottom: 0;
    content: '';
    height: 70%;
    left: 0;
    position: absolute;
    width: 100%;
  }
}

<div class='event-page'>
  <header class='event-page-header'>
    <div class="event-header-content">
      <div class="event-type-label">Event Tag</div>
      <h1 class="event-header-title">Event Title</h1>
    </div>
    <div class='event-header-image'></div>
    <div class="clear"></div>
  </header>
</div>

Answer 2

更改CSS：

ClientTokenRequest clientTokenRequest = new ClientTokenRequest()
    .customerId(aCustomerId);
String clientToken = gateway.clientToken().generate(clientTokenRequest);

向孩子添加.event-type-label{ background: rgba(161,178,166,.8); border-radius: 2px; overflow: hidden; font-family: Lato; letter-spacing: 1px; text-transform: uppercase; color: #fff; position: absolute; top: 0; font-size: 0.8em; font-weight: 300; letter-spacing: .05em; line-height: 1; padding: 5px; } .event-header-title { color: #fff; position: absolute; bottom:0; font-family: Lato; font-size: 3em; font-weight: 300; line-height: 120%; margin: .5rem 0; }将解决您的问题。由于绝对定位元素仅占内容的宽度。

Answer 3

您可以使用此example中的flex - 框。或者只使用position: absolute and add all styling to a sub span来使用所需的空间。

如何将div移动到绝对div的底部和顶部

3 个答案: