Fatal编程技术网
  • html/
  • Html 将收割台固定在顶部而不是上方

Html 将收割台固定在顶部而不是上方

html css

Html 将收割台固定在顶部而不是上方,html,css,Html,Css,我试图在页面顶部获得一个固定的标题，但由于某些原因，它一直在容器顶部。当我使用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,

我试图在页面顶部获得一个固定的标题，但由于某些原因，它一直在容器顶部。当我使用
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>
您需要在css中为
定义
顶部
和
左侧
。header
您需要在css中为
定义
顶部
和
左侧
。header

除了@reinder的答案，请确保在我尝试时使用z-index，因为您的代码容器始终位于header顶部。尝试在.header中放置比容器更高的z-index值。除了@reinder的答案之外，请确保使用z-index，因为当我尝试时，您的代码容器始终位于头的顶部。尝试在.header中放置比容器更高的z索引值。从技术上讲，您不需要左。顶部：0将始终将标题放在页面顶部。是的@fredsbend，但答案仍然正确。您还可以只定义
top
，但更好的是将两者都添加。您可以声明一面，例如
top
，也可以添加页边距
margin:0 10px
我同意，我只是认为在这里添加它会很好，这可能有助于@ThreaT了解这些属性的实际用途。@AspiringAqib如果只声明top，您仍然不需要页边距，例如宽度设置为100%，就像这部作品所展示的那样。不过，我明白你的意思，为了确保固定位置，请使用所有必要的工具。在本例中，top:0 left:0 right:0。然后，使用height属性，无论如何计算，所有浏览器上都只能有一个结果。@fredsbend我知道，但我想你还没有看到
也
。从技术上讲，你不需要留下。顶部：0将始终将标题放在页面顶部。是的@fredsbend，但答案仍然正确。您还可以只定义
top
，但更好的是将两者都添加。您可以声明一面，例如
top
，也可以添加页边距
margin:0 10px
我同意，我只是认为在这里添加它会很好，这可能有助于@ThreaT了解这些属性的实际用途。@AspiringAqib如果只声明top，您仍然不需要页边距，例如宽度设置为100%，就像这部作品所展示的那样。不过，我明白你的意思，为了确保固定位置，请使用所有必要的工具。在本例中，top:0 left:0 right:0。然后，使用height属性，无论如何计算，所有浏览器上都只能有一个结果。@fredsbend我知道，但我想你还没有看到这一点。