1

我已经包含了我正在使用的代码和示例图像，以更好地解释我想要做什么

 <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它上面的所有内容都处于固定位置，所以当我向下滚动时，它会保持“粘”在页面上。 前

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

后

我才学 HTML/CSS 几天，还没有完全理解要不要使用display，position在不同的情况下，在 Codecademy 的课程中​​，我也学会了这个z-index工具。我不知道我想要构建的解决方案是什么。

4

2 回答 2

2

好吧，在这里我们继续对您提出的每件事进行一些解释（我相信您知道他们在做什么比只给您代码更好）：

位置

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

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

z-index

它用于在 3rd 维度中安排您的元素；例如，如果 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
的信息创建的帖子

于 2013-06-12T01:37:01.250 回答
1

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

<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

你的作业是调整这些并弄清楚它们的作用。

于 2013-06-12T01:48:55.280 回答