サイトのタイトルを画面に固定したいけど問題が。。

下にスクロールしてもサイトのタイトルを画面上部に固定したくて
cssで
header{
position:fixed;
position:absolute;
}

にしたところ固定はできたのですが
画面のリンク等をクリックするっことができなくなってしまいました。

どうすればこの問題を解消できますか？

行動規範の内容に同意します

回答2件

ベストアンサー

私の無知かも知れませんが、positionを二重定義しているのがよくわかりません。

CSS
1header{
2position:fixed;
3position:absolute;
4}

恐らくやりたいのはこういうことですかね？

CSS
1header{
2position:fixed;
3top:0px;
4}

さらにその上で、画面上部にheaderをfixしてしまっているので、
ページ内のコンテンツがheaderの裏側に隠れてしまっているのでしょう。

position:fixedで画面最上部にコンテンツを固定させるなら、
その高さ分、メインコンテンツの上マージンを取るのが定石です。

HTML
1<!DOCTYPE HTML>
2<html>
3<head>
4<title>SAMPLE</title>
5<style>
6header{
7    position:fixed;
8    top:0px;
9    height:100px; /* headerの高さを固定 */
10}
11
12article{
13    margin-top:100px;/* headerの高さ分topマージンを取る */
14}
15</style>
16</head>
17<body>
18
19<header>
20<h1>ここにタイトル</h1>
21</header>
22<article>
23<a href="#">ここにリンク</a>
24</article>
25
26</body>
27</html>