簡體   English   中英

如何在固定位置的頁面頂部顯示div?

[英]How to show a div on top of the page in fixed position?

我遇到一些問題,無法將我的Loaded-Content 圖片保留在某個位置:已修復。

“我的容器”通過單擊按鈕來加載隱藏的內容,並在過渡后,加載的內容應從右向左滑動。 它應該總是在最上面。

加載內容<div class="sticky">cat image</div>應該始終固定在頂部。 任何幫助將非常感激。

<html>
<div class="container">many photos</div>
<button>LOADED-CONTENT comes in transform(translateX(0%)</button>
</html>

<html>
sticky image always on top.
<button>back button slides the loaded content transform(translateX(100%)</button>
</html>

http://jsfiddle.net/6kpnN/

添加CSS和specdiv這個div類始終放在最前面

<style>
.sticky
 {
  position: fixed;   
  top : 0px;
  left : 0px;
  width : (specify) ;
  height : (specity here);
  }
 </style>

你可以用CSS做到這一點

#IdName{
position: fixed;
top: 0px;
}

JSFIDDLE

你可以在這里學習CSS

在實際使用CSS之前,應該始終了解有關CSS的更多信息。

在這種情況下,將使用一些屬性:

  • width
  • top
  • left (或right
  • position

整個代碼是這樣的:

.selector {
    position: fixed;
    top: 0;
    left: 0; /* Or right:0; */
    width: 100%; /* Or change it if you want */
}

.selector更改為所需的選擇器

使用position:fixed頁面中的位置。
指定top會使距頁面頂部和元素的距離始終為0。
指定left / right還將固定左/右與元素之間的距離。
最后,指定width將在頁面頂部顯示一個條形圖。

請始終在搜索之前搜索它: 搜索

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM