如何将 div 的底部置于其容器顶部之上

Question

我正在开发一个 HTML/CSS 模块，它的功能类似于模式，但看起来像工具提示

<aside class="learn is-learn-top">
    <a class="learn__trigger" href="#learn-01">
        <span class="learn__icon">[icon]</span>
        <span class="learn__summary">Click here to learn more about TV pilots from Samual Jackson...who else</span>
    </a>
    <div class="learn__content" id="learn-01">
        <a class="learn__close learn__x" href="#!">[close]</a>
        <div>
          Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.
        </div>
    </div>
</aside>

我正在使用

.learn__content:not(:target) {
    display: none;
}

保持隐藏，除非点击触发器。我正在尝试将 .learn__content（可能具有不同的高度）定位在 .learn 上方，如工具提示。如何在不使用明确高度的情况下这样定位它？ Here's what a have so far.

.learn {
    position: relative;
}

.learn__content {
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    background: gold;
}

.is-learn-top .learn__content {
    transform: translateY(-100%);
    top: -100%;
}

但是-100%似乎没有给出必要的偏移量。

Answer 1

transform: translateY(-100%)

并确保使用 WebKit，并在需要时使用 moz

Answer 2

基本上使用bottom: 100%;（在绝对定位元素上），
但让我们看另一个使用

的例子

标签和复选框

aside{ padding-top:100px; /*JUST FOR DEMO*/ }
.modal{
  display:    inline-block;
  position:   relative;
  font-weight: bold;
}
.modal>div{
  pointer-events: none;
  font-weight:normal;
  position:   absolute;
  bottom:     100%;
  left:       50%;
  width:      150px;
  padding:    15px;
  background: #eee;
  transition: 0.3s;
  opacity:    0;
  visibility: hidden;
  transform:  translateY(30px) translateX(-50%);
}
.modal>input{
  position:   absolute;
  visibility: hidden;
  height:     0;
}
.modal>input:checked+div{
  visibility: visible;
  opacity:    1;
  transform:  translateY(0px) translateX(-50%);
}
.modal>div:after{
  content: "×";
  pointer-events:auto;
  position:   absolute;
  top:        5px;
  right:      10px;
  cursor:     pointer;
  transition: 0.3s;
}

<aside>  

  This is some text

  <label class="modal">
    click to find out
    <input type="checkbox">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex inventore aperiam!
    </div>
  </label>

  and more text here

  <label class="modal">
    click me!
    <input type="checkbox">
    <div>
      Like it?! Share and rate!
    </div>
  </label>

  and happy coding

</aside>

正如您在上面看到的，我真的很担心工具提示会出现在哪里。最好使用 JS 脚本或 jQuery 插件 - 这样您就不必担心文本是否可读或隐藏在 window 边缘下方的某处。

如何将 div 的底部置于其容器顶部之上

How to position bottom of div above top of its container

css

css-position