Question

下面是我的html和css文件，当我添加的位置固定时，我的标题div消失了。我甚至指定了左上角但没有运气。请帮忙。

＆＃13;

body { 
        margin: 0px;
        padding:0px;
        background-color:whiteSmoke;
    }

    .header {
        height: 60px;
        background-color: pink;
        box-shadow: 3px 3px 5px silver;
        position: fixed;
        top:0;
        left:0;
    }

＆＃13;

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="style.css">
            <title>the title</title>
        </head>
        <body>
                <div class="header"></div>
        </body>
    </html>

＆＃13;

Answer 1

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>the title</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            background-color: whiteSmoke;
        }

        .header {
            height: 60px;
            width: 100%;
            background-color: pink;
            box-shadow: 3px 3px 5px silver;
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="header"></div>
</body>
</html>

＆＃13;

在您的原始代码中，div中没有带有＆＃34;标题＆＃34;的内容。因此，它的宽度为0.

我已添加＆＃34;宽度：100％＆＃34;到类标题，以便它可以获得宽度并显示。

您可以运行代码来查看结果。我希望它有所帮助。

Answer 2

作为向width元素声明特定fixed属性的替代方法，还可以声明值为right的{{1}}属性，并且＃34 ;扩大＆＃34;屏幕从左到右的0元素宽度。

＆＃13;

fixed

＆＃13;

body {
  margin: 0;
  padding: 0;
  background-color: whiteSmoke;
}

.header {
  height: 60px;
  background-color: pink;
  box-shadow: 3px 3px 5px silver;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

＆＃13;

Answer 3

因为固定元素没有宽度 所以它的高度为60px，因为你没有指定宽度，所以它看起来是隐藏的。添加内容或width: 100%;行的内容将再次显示div。

Answer 4

请在标题中添加一些内容或宽度。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>the title</title>
    </head>
    <body>
            <div class="header"></div>
    </body>
</html>


body { 
    margin: 0px;
    padding:0px;
    background-color:whiteSmoke;
}

.header {
    width:60px;
    background-color: red;
    height: 60px;
    background-color: pink;
    box-shadow: 3px 3px 5px silver;
    position: fixed;
    top:0;
    left:0;
}

Running Expample

添加位置固定后，我的标题div消失了

4 个答案: