简体   繁体   English

滚动页面时,如何使div保持在其他div的顶部?

[英]How do i make a div stay on top of other div's while scrolling the page?

Pls help me. 请帮助我。 I've tried. 我试过了。

This is my code presently 这是我目前的代码

HTML 的HTML

    <div id="header"><!--beggining of header-->

    </div><!--end of header-->

CSS 的CSS

    #header {
    width: auto;
    height: 100px;
    background-color: #F0F;
    border-bottom-style: solid;
    border-bottom-color: #000;
    position: fixed;
    }

SORRY. 抱歉。 THIS IS MY FIRST TIME USING THIS STE. 这是我第一次使用此STE。 I CANT POST THE CODE. 我不能发布代码。 BUT SEE THE FULL HTML HERE 但请在此处查看完整的HTML

check this fiddle 检查这个小提琴

html: 的HTML:

<div class="cover">
  top
   <div class="fixed-box">
     hello                            
   </div>
</div>

css: CSS:

.fixed-box {
  width:100px;/*just for preview*/
  height:100px;/*just for preview*/
  background:red;/*just for preview*/
  position:fixed;
  top:10px;
}
.cover {
  width:500px;/*just for preview*/
  height:10000px;/*just for preview*/
  background:blue;/*just for preview*/
}
#header {width: auto; height: 100px; background-color: #F0F; border-bottom-style: solid;
    border-bottom-color: #000; position: fixed; top:0px; z-index:100;}

please make sure after the header div make one container div for content and make that div position:relative; z-index:50; 请确保在标头div之后为内容添加一个容器div并将该div position:relative; z-index:50;设为position:relative; z-index:50; position:relative; z-index:50;

我怎样才能得到一个<div>漂浮在另外两个之上<div> s 如果空间太窄,三个人都不能并排?</div><div id="text_translate"><p> 我有一个由两个&lt;div&gt;并排组成的进度条,在&lt;dd&gt;内浮动到右侧。 在进度条的左侧,我在另一个&lt;div&gt;中有一些文本。 如果&lt;dd&gt;太窄,我希望&lt;div&gt;包含文本到进度条顶部的 go,而不是分成两行。</p><p> 我正在使用 bootstrap.css 没有修改: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }.my-0 { margin-top: 0;important. }:py-2 { padding-top. 0;5rem.important: };float-left { float. left:important; }.float-right { float: right;important. }:bg-success { background-color; #28a745 !important; } .bg-danger { background-color: #dc3545 !important; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;dd class="col-6 my-0"&gt; &lt;div class="float-left"&gt;Some text&lt;/div&gt; &lt;div class="py-2 float-right bg-success" style="width:10px;"&gt;&lt;/div&gt; &lt;div class="py-2 float-right bg-danger" style="width:90px;"&gt;&lt;/div&gt; &lt;/dd&gt;</pre></div></div><p></p><p> 我尝试将z-index添加到&lt;div&gt; ,但无法达到我想要的效果。</p><p> 怎么做?</p></div></div> - How can I get a <div> to float on top of two other <div>s if the space is too narrow for all three to stay side-by-side?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 无论访问者滚动的页面有多低,如何使DIV停留在屏幕顶部? - How do I make a DIV stay at the top of the screen no matter ow far down the page my visitor scrolls? 滚动时将div移到顶部并停留在那里 - Move div to top while scrolling and stay there 仅滚动时,如何使导航菜单停留在页面顶部? - How to make navigation menu stay at the top of the page while scrolling only? html-如何在滚动时使div元素停留在顶部? - html - How to make a div element stay at the top while you scroll? 如何使div保持在页面上的视点顶部 - How to make the div stay on the top of the view point on the page 如何在移动视图中将最后一个div列保留在页面顶部? - how to make the last div column stay on the top of the page in mobile view? 我怎么做 <div> 滚动时彼此垂直擦拭? - How do I make <div>s wipe vertically onto each other when scrolling? 滚动时如何使可滚动div内的中间div停留在顶部 - how to make middle div inside scrollable div stay on top when scrolling 我怎样才能得到一个<div>漂浮在另外两个之上<div> s 如果空间太窄,三个人都不能并排?</div><div id="text_translate"><p> 我有一个由两个&lt;div&gt;并排组成的进度条,在&lt;dd&gt;内浮动到右侧。 在进度条的左侧,我在另一个&lt;div&gt;中有一些文本。 如果&lt;dd&gt;太窄,我希望&lt;div&gt;包含文本到进度条顶部的 go,而不是分成两行。</p><p> 我正在使用 bootstrap.css 没有修改: </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .col-6 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; }.my-0 { margin-top: 0;important. }:py-2 { padding-top. 0;5rem.important: };float-left { float. left:important; }.float-right { float: right;important. }:bg-success { background-color; #28a745 !important; } .bg-danger { background-color: #dc3545 !important; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;dd class="col-6 my-0"&gt; &lt;div class="float-left"&gt;Some text&lt;/div&gt; &lt;div class="py-2 float-right bg-success" style="width:10px;"&gt;&lt;/div&gt; &lt;div class="py-2 float-right bg-danger" style="width:90px;"&gt;&lt;/div&gt; &lt;/dd&gt;</pre></div></div><p></p><p> 我尝试将z-index添加到&lt;div&gt; ,但无法达到我想要的效果。</p><p> 怎么做?</p></div></div> - How can I get a <div> to float on top of two other <div>s if the space is too narrow for all three to stay side-by-side? 如何使内部div的顶部边框与外部div的顶部边框重叠? - How do I make an inner div's top border overlap the outer div's top border?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM