标识和菜单后面显示的文本

Question

我是一个完全的初学者，正在努力让 html 和 css 为我工作，我需要帮助！我会尝试用英语描述我的问题。

在我的左上角，我有一个位置为“固定”的标识，因为我希望它在我向下滚动时保持不变。在它下面我有一些文字。当我在页面上向下滚动时，我的标识保持不变，但文本显示在它的每一侧（和它的后面）。我希望它在整个页面顶部像一个白色（与标识背景颜色相同）块，这样文本就不会显示在两侧。或者更好的是，一些方法可以让文本在我滚动时不会一直向上，而是停留在标识（和菜单）下面。

我希望我能让自己得到理解，并且有人有解决方案。:)

<div class="title"><a href="index.html"><img src="bilder/logga.jpg" class="title" alt="Bokhandeln">
        </a></div>

    <div class="info">
    <h3>Öppettider</h3>
        Måndag-fredag 10-18 <br>
        Lördag 10-15<br>
        Söndag stängt<br>

        <h5>Avvikande öppettider</h5>
        Lördag den 11/6 stängt <br>
        Lördag den 17/6 stängt
</div>


.title a {
    position: fixed;
    text-decoration: none;
    display: block;
    border: 2px solid white;
    padding: 10px;
    padding-bottom: 5%;
    background-color: white;
   
}

.title {
    background-color: white;
    height: 20%;
    position: fixed;
    left: 0%;
    top: 0%;
    display: block;
    padding-left: 10px;
    z-index: 3;
}

.info {
    position: relative;
    padding-top: 8%;
    display: block;
    z-index: 1;
}

珍妮

Answer 1

只需修复徽标的适当“站点 header”容器元素即可（不管它叫什么，例如 #header 或 .menu-bar）（而不是徽标），然后将 background-color 设置为所需的颜色（例如 #ffffff）。

这应该有“body”内容，然后向上滚动到整个站点下方header。

P.S。如果您可以将 html 本身的代码块添加到您的问题中，那将有助于其他人为您提供更多 accurate/specific 答案。 :-D

嗨珍妮，

好的，我认为以下内容更适合您。一些注意事项：

我将您的白色更改为 blue/green/red 以便在测试期间获得更好的可见性。
我添加了一个 .logo class 来设置您的 href 图片的高度（接下来是推理）。
最大的问题是基于百分比 height/padding。使用固定像素 'px' 值，您的 .title/.info 重叠问题就会消失。我设置的值是任意的，因为我不知道你的 logga.jpg 图片大小，所以相应地调整所有 px 值（不要忘记调整 .info margin-top 值，这样它就不会由 .title 覆盖）。
.title 设置为 100% 宽度，因此不会看到 .logo 右侧的 .info 文本。
我将您的 .title 10px 内边距更改为边距 - 内边距是可点击部分 link，边距不是。
冗余规则是 /*commented out*/。
仅供参考：零“0”值不需要测量值（px、em、% 等...）- 0===0。

还有一些初学者指南：

为了更好的可读性，请尝试以一致的方式组织您的 CSS。例如。我使用“从上到下/从外到内”的方法。所以 .title 规则将出现在 .title a (Top > Bottom) 之前，并且每个规则中的声明将按顺序从位置...一直到您的 font-size，以及 misc 属性，如光标等（外面>里面）。还有其他的办法，没有1的必然是right/wrong，但是挑一个坚持下去——https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685
html/css 中的一致 indentation/returns 也将提高可读性（根据我的解决方案）。

希望对您有所帮助！ :-)

HTML

</html>
<head>
</head>
<link rel="stylesheet" href="style.css">
<body>
  <div class="title">
    <a href="index.html"><img src="bilder/logga.jpg" class="logo" alt="Bokhandeln"></a>
  </div>
  <div class="info">
    <h3>Öppettider</h3>
        Måndag-fredag 10-18 <br>
        Lördag 10-15<br>
        Söndag stängt<br>

    <h5>Avvikande öppettider</h5>
        Lördag den 11/6 stängt <br>
        Lördag den 17/6 stängt
  </div>
</body>
</html>

CSS

.title {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3;
    display: block;
    width: 100%;
    height: 50px;
    padding-left: 10px;
    background-color: blue;
}

.title a {
    position: fixed;
    /*display: block;*/
    /*border: 2px solid green;*/
    margin: 10px;
    /*padding-bottom: 5%;*/
    background-color: red;
    text-decoration: none;
}

.title .logo {
    height: 30px;
}

.info {
    position: relative;
    z-index: 1;
    display: block;
    /*padding-top: 8%;*/
    margin-top: 70px;
}

标识和菜单后面显示的文本

Text showing behind logotype and menu

html

css

position