ページの上部に固定ヘッダーを取得しようとしていますが、何らかの理由で代わりにコンテナーの上に表示され続けます。私が使用するとき、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>