修复页面的顶部

Question

上下文，我的页面分为：

• 左手边（col-xs-8）
  • 上半部分（课程：request-top）
  • 底部
• 右侧（col-xs-4）

应固定左手侧和右手侧的顶部。左手侧的底部应自由滚动。我很容易固定右手边，但是在修理左手边的顶部时遇到了麻烦。

如果我将position:fixed;z-index:1000;添加到左侧的顶部，它会修复，但随后col-xs-8会被覆盖，而顶部会覆盖右侧。如何修复但保留col-xs-8设置？ （如果我不允许它扩展整个宽度，然后嵌入另一个col-xs-8，然后只给右边一个更高的z-index）

工作暂存版本：https://hidden-tundra-8656.herokuapp.com/request

Answer 1

需要一步一步检查..

我只是做了一些改变，试试看之后解决下一个问题..

.request-top {
background-color: #D8D8D8;
padding-top: 3%;
padding-bottom: 3%;
position: fixed;
z-index: 1000;
}
.request-bottom {
background-color: white;
padding-bottom: 3%;
position: relative;
}
.cart-section {
background-color: gray;
/* height: 100%; */
padding-top: 3%;
padding-bottom: 3%;
border-left: 7px ridge #939393;
right: 0;
}
.request-top {
background-color: #D8D8D8;
padding-top: 3%;
padding-bottom: 3%;
position: fixed;
z-index: 1000;
width: 85%;
}

您好..

这是我完成的网页。像这样设计网页。 有一个标题为主体部分，标题内有5-6个div用于单独使用。查看主体部分和标题部分之间的宽度差异。标题部分宽度最大，并且在主体部分宽度有限且div为以中心为中心。

在我的身体内部，我使用了另一个我在此图片中标记的div，并且我还为divs添加了单独的滚动效果。因此，他们可以单独移动。我在这里使用的代码是设置

    max-width: 292px;  //choose your dimension
    overflow: scroll;

我认为最好使用chrome浏览器。它有一个对Web开发人员非常有用的功能。

首先

以chrome格式打开您的网页。

右键单击（要更改的部分），然后在Windows平台中选择Inspect element [Ctrl + Shift + i]。

然后你可以看到这样......

1我这里提到的是代码部分和 2是css部分。

所选部分在主屏幕（左侧，在我的情况下）中是高亮度的

然后对适合您网页的css部分进行必要的更改，您可以实时查看更改。

[<强> !!请注意，这仅用于检查和查看，因此，如果您进行必要的更改，请复制已编辑的代码并将其粘贴到原始源代码，并在进行任何更改之前创建源代码的备份]

如果这对你有帮助，请投票..

Regds ..