Question

我正在尝试添加一个新的div，它将把文本放在我已经制作的标题下面。但是，当我添加带有文本的新div时，它会放在标题上方，不确定原因。请告诉我我在做错什么。

<body>
    <header>
    <span class="image">
            <img src="logo.png">
        </span>
        <span class="text">
            <h1>Text Here</h1>
        </span>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
    </header>

    <div class="text1">
        <h2>Text Here</h2>
    </div>

</body>

嗨，

这是我的CSS代码。

.text {
    font-family: sans-serif;
    font-size: 32px;
    color: rgb(26,30,170);
}

.image {
    display: inline-block;
}

.text {
    display: inline-block;
    vertical-align: 25px;
    padding-right: -100px;
}

header {
    border-bottom: solid;
    border-color: rgb(26,30,170);
    border-radius: 25px;
    width: 1550px;
    margin-top: -11px;
    margin-left: -15px;
    position: fixed;
    height: 130px;
}

h3 {
    display: inline-block;
    margin-left: 50px;
    color: rgb(92,194,242);
}

Answer 1

我查看了您的代码并进行了一些更改。我想我得到了您想要的结果。您可以使用它。

header {
    border-bottom: solid;
    border-color: rgb(26,30,170);
    border-radius: 25px;
    width: 1550px;
    margin-top: 0px;
    margin-left: -5px;
    position: static;
    height: 130px;

}

img {
    display: inline;
    margin-left: 15px;
    margin-top: 100px;

}

h1 {
    font-family: sans-serif;
    font-size: 32px;
    color: rgb(26,30,170);
    display: inline;
    margin-top: 25px;
    margin-left: 10px;
}



h2 {
    margin-top: 5px;

}



h3 {
    display: inline;
    margin-left: 50px;
    color: rgb(92,194,242);
}

<body>
    <header>
      <img src="logo.png">
      <h1>Text Here</h1>
      <h3>Text Here</h3>
      <h3>Text Here</h3>
      <h3>Text Here</h3>
    </header>

    <h2>Text Here</h2>


</body>

Answer 2

您可以从该代码笔中看到。

标题之外的新div位于标题的底部，就像您想要的一样。

与您的代码相同

    <body>
    <header>
    <span class="image">
            <img src="logo.png">
        </span>
        <span class="text">
            <h1>Text Here</h1>
        </span>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
        <h3>Text Here</h3>
    </header>

   <div class="text1">
        <h2>New Div</h2>
   </div>

   </body>

https://codepen.io/anon/pen/ZZQJrz

Answer 3

您的标头位置固定，更改一些css属性并添加一些css，例如

body{
  padding-top: 130px; /*Add this*/
}

header {
    border-bottom: solid;
    border-color: rgb(26,30,170);
    border-radius: 25px;
    width: 1550px;
    margin-top: -11px;
    margin-left: -15px;
    position: fixed;
    height: 130px;
    top:0; /*Add This*/
}

https://jsfiddle.net/z3nL18a9/

Answer 4

您在标题上使用position:fixed;，这就是标题下的div升高的原因

使用position: sticky;代替fixed

JSFIDDLE：https://jsfiddle.net/m3kqgfvy/1/

我希望它能起作用

新的div位于标题上方

4 个答案: