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%;（在绝对定位元素上），
但是让我们看一下使用

的另一个例子

标签和复选框

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

如何将div的底部放在容器顶部之上

2 个答案: