Question

我正在尝试在页面顶部获得一个固定的标题，但由于某种原因，它会继续在容器的顶部。当我使用margin-bottom或margin-top时，它仍然会粘在容器上。

index.css

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline; 
}
.full-container {
    width:100%;
}
.boxborder {
    -webkit-box-shadow:inset 0px 0px 0px 10px black;
    -moz-box-shado:inset 0px 0px 0px 1px black;
    box-shadow:inset 0px 0px 0px 1px black;
}
.header {
    height: 150px;
    margin-bottom: 20px;
    position: fixed;
}
.container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 1200px;
}

的index.html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div class="full-container header boxborder"></div>
        <div class="container boxborder"></div>
    </body>
</html>

Answer 1

您需要在css中为top

定义left和.header

固定顶部而不是上方的标头

1 个答案: