HTML-需要帮助理解嵌套-堆栈溢出

顺晟科技

2022-10-19 14:06:26

204

我很难找到一个HTML网站来显示我想要的方式。我做了一个横幅和一个导航栏，但我有一个困难的时候，试图添加任何低于导航；它要么覆盖横幅，要么被横幅覆盖。

这是HTML:

以下是CSS:

不胜感激。谢谢。

edit:under是从标题中删除。然而，这也改变了我希望页面显示的方式；也就是说，横幅、导航等应该填满页面的左边、右边和顶部。

顺晟科技：

问题是您有

及以下位置。

-作为样式。

位置绝对https://developer.mozilla.org/en-美国/docs/web/css/position:

从普通文档流中移除元素，并且没有空格为页面布局中的元素创建。它是相对定位的与其位置最近的祖先（如果有的话）；否则，放置相对于初始包含块。它的最终位置是由top、right、bottom和left的值确定。

当z-index的值为不是自动的。绝对定位框的边距不会折叠带有其他边距。

这意味着您的div不创建空格，因此div将忽略其位置。

尝试从标题中删除。

编辑:

抱歉回答晚了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
    <div id="wrapper">
        <header id="header"> Welcome </header>
        <div id="bannerHolder">
            <div class="banner">
                OLD BARBER
            </div>
            <nav id="nav">
                <a href="test_template.html"> Home </a>
                <a href="test_template.html"> Products </a>
                <a href="test_template.html"> About </a>
            </nav>
        </div>
    </div>
    <div class="container">
        <img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
        <div class="overlay">
            <div class="text">Shop</div>
        </div>
</body>
</html>

编辑的标题CSS如下所示。我所做的是删除了高度参数。这个高度定义了100px的高度，但是内部元素的高度更大，所以有重叠。我还删除了一些未使用的CSS属性。

还为banner填充整个空间-常见的模式是为body标签设置。我经常使用以下设置开始我的项目:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Home: Old Barber </title>
</head>
<body id="body"><link rel="stylesheet" href="test.css">
    <div id="wrapper">
        <header id="header"> Welcome </header>
        <div id="bannerHolder">
            <div class="banner">
                OLD BARBER
            </div>
            <nav id="nav">
                <a href="test_template.html"> Home </a>
                <a href="test_template.html"> Products </a>
                <a href="test_template.html"> About </a>
            </nav>
        </div>
    </div>
    <div class="container">
        <img src="https://www.open.edu/openlearn/ocw/pluginfile.php/1654608/mod_oucontent/oucontent/93155/8a822f73/b6b08556/mse_s6_figure_3.jpg" alt="Barber" class="img"></img>
        <div class="overlay">
            <div class="text">Shop</div>
        </div>
</body>
</html>

https://jsfiddle.net/oamx38y6/36/

上一篇：HTML-在模板Django中的单个下一篇：JavaScript-当鼠标在项目上

网站建设

Html

HTML-需要帮助理解嵌套-堆栈溢出