色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS粘性標題

CSS
林玟書2年前11瀏覽0評論

我在我的主頁上添加了一個粘性標題，但是粘性標題似乎在頁面上其他內容的后面，所以當我向下滾動頁面時，圖像和文本在標題的上面，有什么方法可以阻止這種情況嗎？

以下是我的代碼:

<style>
/* Reset body padding and margins */
body
{
    margin: 0;
    padding: 0;
}

/* Make Header Sticky */
#header_container
{
    background: #827878;
    border: 1px solid #666;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
}

#header
{
    line-height: 60px;
    margin: 10 auto;
    width: 940px;
    text-align: left;
    font-size: 26px;
    color: #f5f5f5;
    line-height: 28px;
    margin-bottom: 14px;
    font-family: 'Source Sans Pro',sans-serif;
}

/* CSS for the content of page. I am giving top and bottom 
   padding of 80px to make sure the header and footer 
   do not overlap the content. */
#container
{
    margin: 0 auto;
    overflow: auto;
    padding: 80px 0;
    width: 940px;
}

#content
{
}

/* Make Footer Sticky */
#footer_container
{
    background: #eee;
    border: 1px solid #666;
    bottom: 0;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer
{
    line-height: 60px;
    margin: 0 auto;
    width: 940px;
    text-align: center;
}
</style>


<!-- BEGIN: Sticky Header -->
<div id="header_container">
    <div id="header">
        Header Content
    </div>
</div>
<!-- END: Sticky Header -->

添加以下代碼:在# header _ container & ampz-index:1001 in #頁眉樣式。

#header_container { 
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

#header {
    z-index: 1001;
}

只需使用z-index參數。 例如z-index: 2(表示層的順序) 它僅適用于使用位置的元素:絕對、相對或固定

W3schools示例: http://www.w3schools.com/cssref/pr_pos_z-index.asp

從iphone發送

<style type="text/css">
body{
    margin:0px;
    background:#000;
}
.header-cont {
    width:100%;
    position:fixed;
    top:0px;
}
.header {
    height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
}
.content {
    width:960px;
    background: #F0F0F0;
    border: 1px solid #CCC;
    height: 2000px;
    margin: 70px auto;
}
</style>
</head>
<body>

<div class="header-cont">
    <div></div>
</div>

<div></div>

我正在尋找一個解決方案，這樣我就可以為我的客戶使用它，幸運的是，我找到了一個解決方案，如果你正在使用一個名為El ementor的WordPress插件，你可以將類似于下面代碼的代碼放入容器中。

.sticky-cssSelector-here {
  position: sticky;
  top: 0;
  /* for alignment below */
  align-self: flex-start;
  height: calc(100vh - 45px); /* this is to set a fixed height in different screen sizes and 100 view height for a maximum height of the element */
  padding-top: 100px; // here you can adjust this one as well to make your element viewable

注意:CSS選擇器是你應該放在你想要插入的元素里面的那個。

如果這不起作用，您可以嘗試下面的代碼: 位置:絕對； z指數:9999；

在標題中添加:

position:absolute;
z-index:9999;

這將使它高于一切