Question

https://jsfiddle.net/nrdk61ob/2/

#body-wrapper {
   margin: 0 auto;
   min-height: 1000px;
   width: 75%;
   box-shadow: 0 0 15px 2px #000;
   border-radius: 20px;
   margin-top:25px;
}
#navigation-main {
   width: 100%;
   margin: 0 auto;
   text-align: center;
   position:absolute;
   background-color:rgba(255,0,255,0.30);
   box-shadow:0 1px 3px #000;
   z-index: 1000;
}

这是我正在运行的代码，我想要做的是基本上将导体div推到身体div后面有两个原因。

我希望滚动后导航固定，我已经控制了。
当您第一次加载页面时，我希望body div的阴影进入导航div。基本上，如果你看一下片段，它的边缘是圆的，但我只希望底部是圆的，而不是顶部。

我已经阅读了定位，我已经尝试了30种绝对和相对定位与索引的组合，我很茫然。我无法做到我想做的事。

基本上..我只需要知道，如果有一种方法可以让我将身体div推到后面。

编辑：我想到了。它是导航背景颜色的alpha级别。我是个白痴。谢谢Paulie_D指出你注意到的悬停事物。

Answer 1

用于创建固定菜单，使用position：fixed; jsfiddle

#header-wrapper{
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
}
#navigation-wrapper {
  width: 100%;
  position: fixed;
  top: 100px;
  z-index: 10;
}

Answer 2

这就是你要找的东西：

$(function () {
  var scrollTopNavMain = $("#navigation-main").offset().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > scrollTopNavMain)
      $("#navigation-main").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "right": 0
      });
    else
      $("#navigation-main").css({
        "position": "absolute",
        "top": "auto",
        "left": "auto",
        "right": "auto"
      });
  });
});

小提琴：https://jsfiddle.net/z56m3jpq/

对于你的＃2，它使用Shadow DOM渲染，所以不可能。

Answer 3

目前还不完全清楚你在问什么，但有几点可能会有所帮助：

身体div已经落后于导航。您可以看到它，因为您的背景颜色的不透明度为0.3。如果选择纯色，则会覆盖它。
如果您不希望所有角落弯曲，则边界半径可以有4个值。 border-radius: 0px 0px 20px 20px;只意味着底部是弯曲的。

Answer 4

通过更改＆＃34; border-radius：20px;＆＃34;更新您的＃body-wrapper代码到

border-radius: 0 0 20px 20px;// only rounded bottom

修复导航，更新＃navigation-main代码并更改＆＃34; position：absolute;＆＃34;到

position:fixed;

在标题和导航后面推动身体div

4 个答案: