固定的位置，以便它移动其他元素，但也绝对，以便它粘在顶部

Question

您好我如何在页面顶部创建一个横幅为div。此横幅应该向下推送其他内容（任何内容），以便在横幅下呈现当前的html页面。但如果用户向下滚动，它也应该贴在窗口的顶部。

我该如何制作这个CSS？

我试过

position: relative;

没有运气请帮助

编辑：

位置固定工程。我的问题是页面的内容可能会有很大不同，因为这是几个网页的Chrome扩展程序。因此，在定位的情况下，页面的内容不会被推迟。在相对位置的情况下，内容会被推下来但是它不会像固定的那样粘在顶部。

.myMenu{
    position: relative;
    width: 100% !important; 
    height: 100px !important;  
    background-color: #40E0D0 !important
    min-width: 990px !important;
    left: 0 !important;
    color: #757575;
    z-index: 10;
}

这是我非常简单的代码，我正在玩Chrome的编辑，但就像我说没有运气一样

编辑2：

无论内容是什么，我都需要横幅来推送所有网页的内容。以下是一些如何使用其中一个网页的例子：

原始网页：

已插入固定位置的横幅广告 :(它按预期粘在顶部，但内容未按下）Ohh和FYI我正在将内容添加到html标记中，如下所示：

$("html").prepend(myMenu);

因此，您可以看到横幅隐藏了网页的内容。

这个位置相对：

在这种情况下，它工作得更好，但仍然没有运气，因为搜索仍然是隐藏的和网页的徽标。当用户向下滚动时，菜单也无法粘在顶部。

就像我说这只是一个例子，无论网页内容如何，​​我都需要我的横幅贴在上面。有什么想法吗？请记住这是几个网页的Chrome扩展程序

再次感谢你

编辑3：

非常感谢大家按预期工作。我的情况是身体标签内有

的元素

position:fixed;

这些元素与我的菜单发生冲突。是否有某种方法可以“包裹”整个身体，使其内部的所有固定位置元素仅相对于身体而不是窗口固定？

感谢

Answer 1

您可以使用padding-top作为横幅，并将正文的/* here 84px is the height of banner */ body {padding-top: 84px; margin-top:0} .banner {position:fixed; margin-top:-84px; width:100%; background:white;} .banner img {height:84px; }设置为横幅的高度。

<div class="banner">
  <img src="https://www.easa.europa.eu/sites/all/themes/easa_foundation/logo.png">
</div>

<div>
  <p>  The work of the Agency centres on ensuring the highest levels of civil aviation safety, through certification of aviation products, approval of organisations to provide aviation services, development and implementation of a standardised European regulatory framework. We further engender a culture of safety through our work in the fields of accident investigation, Safety Analysis and our research programme.</p>

  <p>The Agency acts as the focal point for coordination of aviation accident investigation safety recommendations and is responsible for the follow-up of occurrences where aviation safety has been endangered, as well as the internal coordination of the corrective actions that need to be undertaken, including actions proposed in safety recommendations.</p>

  <p>The Agency also conducts studies and provides reports concerning the safety of European and world-wide aviation. Data on the aviation system and accidents, incidents and occurrences is collected, categorized and stored and forms the base for its studies.</p>

  <p>Furthermore, safety research projects needed to support the Agency's tasks are specified, commissioned and managed. Working with partners we aim to 
leverage safety knowledge gains through joint funding schemes.</p>

  <p style="height:1000px;">...</p>
  <p>end.</p>

</div>

functools

Answer 2

您可以在菜单div上使用{ "message": "Cannot assign customer to the given cart. You don't have permission for this operation.", "trace": "#0 /opt/lampp/htdocs/magento/vendor/magento/framework/Interception/Interceptor.php(123): Magento\\Quote\\Model\\GuestCartManagement\\Plugin\\Authorization->beforeAssignCustomer(Object(Magento\\Quote\\Model\\GuestCart\\GuestCartManagement\\Interceptor), 'ccefc695ec22b7e...', 31, 1)\n#1 /opt/lampp/htdocs/magento/var/generation/Magento/Quote/Model/GuestCart/GuestCartManagement/Interceptor.php(39): Magento\\Quote\\Model\\GuestCart\\GuestCartManagement\\Interceptor->___callPlugins('assignCustomer', Array, Array)\n#2 [internal function]: Magento\\Quote\\Model\\GuestCart\\GuestCartManagement\\Interceptor->assignCustomer('ccefc695ec22b7e...', 31, 1)\n#3 /opt/lampp/htdocs/magento/vendor/magento/module-webapi/Controller/Rest.php(307): call_user_func_array(Array, Array)\n#4 /opt/lampp/htdocs/magento/vendor/magento/module-webapi/Controller/Rest.php(216): Magento\\Webapi\\Controller\\Rest->processApiRequest()\n#5 /opt/lampp/htdocs/magento/var/generation/Magento/Webapi/Controller/Rest/Interceptor.php(37): Magento\\Webapi\\Controller\\Rest->dispatch(Object(Magento\\Framework\\App\\Request\\Http))\n#6 /opt/lampp/htdocs/magento/vendor/magento/framework/App/Http.php(135): Magento\\Webapi\\Controller\\Rest\\Interceptor->dispatch(Object(Magento\\Framework\\App\\Request\\Http))\n#7 /opt/lampp/htdocs/magento/vendor/magento/framework/App/Bootstrap.php(258): Magento\\Framework\\App\\Http->launch()\n#8 /opt/lampp/htdocs/magento/index.php(39): Magento\\Framework\\App\\Bootstrap->run(Object(Magento\\Framework\\App\\Http))\n#9 {main}" 。

请检查：JSFIDDLE

编辑：您甚至可以使用jquery查找position: fixed div的高度，并提供与banner div的margin top相同的高度。

Answer 3

希望这会有所帮助

添加不可见的空白区域，与横幅/菜单相同的高度

[HTML]

<div class="myMenu">
   a
</div>
<div class="blank_space"></div>

<div class="content">
<p>
content1<br>
content2<br>
content3<br>
content4<br>
content5<br>
content6<br>
content7<br>
content8<br>
content9<br>
content10<br>
<br><br><br><br><br><br><br><br><br><br>
content1<br>
content2<br>
content3<br>
content4<br>
content5<br>
content6<br>
content7<br>
content8<br>
content9<br>
content10<br>
</p>
</div>

[CSS]

body {
  margin: 0;
}

.myMenu{
    position: fixed;
    width: 100% !important; 
    height: 100px !important;  
    background-color: #40E0D0 !important;
    min-width: 990px !important;
    left: 0 !important;
    color: #757575;
    z-index: 10;
}

.blank_space {
    width: 100%;
    height: 100px;
}

https://jsfiddle.net/hv9zrx8q/1/

Answer 4

您可以使用position: fixed;作为您的菜单，也可以使用您想要留在其中的内容，只需将margin-top设置为菜单高度即可。

Answer 5

固定位置和绝对位置都不在流量范围内，因此不会推动其他元素。

你想要＆＃34;位置相对，以便它移动其他元素，但也固定，以便它粘在顶部＆＃34;

这存在。它被称为position: sticky。

这是一个新事物，所以它不会在旧浏览器上工作。