Question

我已经包含了我正在使用的代码和示例图片，以便更好地解释我想要做的事情

 <style>
            body {
                border: 5px double black;
                font-family: Courier;
                text-align:center;}
            .homepage {
                width: 75%;}
            .logo {    /*the image that you are seeing being sent behind the text*/
                width: 150px;
                }
            #header { /*the id of the div that is has the class="img" file nested*/
                display:block;
                margin:auto;
                border-bottom: 2px solid black
                }
            #intro {
                position:relative;}

        </style>

这就是我目前所拥有的，但希望bottom-border及其上方的所有内容都处于固定位置，因此当我向下滚动时，它会“粘在”页面上。 before http://i41.tinypic.com/2zxxf2b.png

这就是我将position:fixed;放入.logo选择器时所得到的。

after http://i39.tinypic.com/6gvolh.png

我只学习了几天的HTML / CSS，并且从未完全理解是否在不同的情况下使用display和position以及在Codecademy课程中我也采用了z-index工具。我不知道解决方案是什么，我想要建立什么。

Answer 1

好吧，在这里，我们会对你提出的每件事情做一些解释（我相信你知道他们做什么比给你代码更好）：

位置

用于确定元素在页面中的定位方式。它与left，top，right和bottom属性一起使用。
你有几个选择：

static：默认行为。前面提到的属性不适用。
fixed：将元素相对于屏幕视口定位。滚动时（你的情况！）
absolute：将元素相对于最近定位的祖先定位。
relative：布置未定位的元素，然后调整其位置。

z索引

这是为了在第三维中安排你的元素;例如，如果重叠了2个元素，那么具有较大z-index的元素将是最重要的元素。

您需要定位元素（将position设置为除static之外的其他内容）才能使用z-index。

显示

如果要确定元素的渲染框，可以使用display。选项如下：

none：该元素不会显示，也不会占用屏幕上的空间。
inline：该元素生成一个或多个内联元素框。
inline-block：该元素生成一个块元素框，但它将保留在一个内联框中。
block：该元素将生成一个块元素框。

您还有很多其他选项，例如table，table-cell，table-cell-group，table-row，table-row-group，table-caption等！正如您想象的那样，每个都将表现为对应的表元素。

我希望它可以帮助你理解这些属性;）
使用MDN

的信息创建的帖子

Answer 2

这是一个如何设置固定标头的基本示例：

<div class="header">The header is here...</div>
<div class="main">The Main Story Is Here</div>

从两个块级元素开始，一个是固定的，另一个是主要内容。

.header {
    border: 2px dotted gray;
    height: 50px;
    width: 100%;
    background-color: rgba(125,125,125,0.4);
    position: fixed;
    top: 0;
    left: 0;
}
.main {
    border-top: 2px solid red;
    margin-top: 60px;
}

一些关键要素是：top: 0和margin-top: 60px

你的作业是调整它们并找出它们的作用。

CSS：固定定位的不良后果？

2 个答案:

位置

z索引

显示