如何定位上述

我正在一個HTML/CSS模塊，像一個模態功能，但看起來像一個提示其容器的頂部DIV的底部如何定位上述

<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%似乎但不給予必要的偏移。如果

來源

2015-08-21 ryanve

如果積累的評論高度超過可用空間會怎麼樣 - 最終在頂部窗口邊緣下方結束得太遠？ –

'top：-100％;'將元素放置在容器的高度，相對於工具提示的高度（前者會很好，呵呵）。注意Bootstrap使用JS提供工具提示可能很有趣。假設這是因爲需要基於盒子大小的位置。 –

我知道這是可能的JavaScript，但我認爲這是可能的，僅僅是CSS，我希望能夠找出它 – ryanve

transform: translateY(-100%)

並確保您使用WebKit和moz需要

來源

2015-08-21 02:42:32 Gacci

只要裏面的內容生成框高度，這個工作。起初，我在內部使用'position：absolute'進行佈局，導致箱體高度小於滿箱。 – ryanve

基本上都採用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插件 - 這樣，您不必擔心文本是否可讀或隱藏在窗口邊緣的某個位置。

來源

2015-08-21 02:49:14

如何定位上述

回答

相關問題