HTMLリンクをクリックすることはできません

Question

私のウェブサイト上の「navbar」のリンクは何らかの理由でクリックできず、その理由を見つけることができません。ビューポートにあります（ここにはウェブサイトへのリンク：https://codetheworld.000webhostapp.com/）。ウェブサイト上のリンクは「コードを学習する」ボタンとされています。一つの興味深いことは、いったんinspect要素ウィンドウを開くと、それが機能するということです。ここだけのナビゲーションバーのコードスニペットは、次のとおりです。

#first { 
 
    margin-top: 500px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    top: -1150px; 
 
    left: 100px; 
 
    z-index: 4; 
 
} 
 

 
li a { 
 
    width: 200px; 
 
    height: 50px; 
 
    font-size: 2em; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: Georgia, serif; 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    border-radius: 7px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
} 
 

 
li a:hover { 
 
    background-color: grey; 
 
    color: white; 
 
    text-decoration: none; 
 
}

<ul id="first"> 
 
    <li><a href="tutorial.html">Learn to code</a></li> 
 
</ul>

Answer 1

さて、あなたは<div id="up2">を持って、それは右のあなたのボタンの上にあります。それがあなたがそのボタンをクリックできない理由です。

div＃up2の上限値を上げ、div＃up2の要素の上限値を編集/減らすことができます。

Answer 2

あなたは、ビューポートの外にあなたの要素を配置するので、それをクリックすることはできません。 マージントップ&トップの位置を削除し、すべてが動作します：

#first { 
 
    background: black; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    left: 100px; 
 
    z-index: 4; 
 
} 
 

 
li a { 
 
    width: 200px; 
 
    height: 50px; 
 
    font-size: 2em; 
 
    text-decoration: none; 
 
    color: white; 
 
    font-family: Georgia, serif; 
 
    padding: 10px; 
 
    border: 2px solid white; 
 
    border-radius: 7px; 
 
    text-align: center; 
 
    line-height: 30px; 
 
} 
 

 
li a:hover { 
 
    background-color: grey; 
 
    color: white; 
 
    text-decoration: none; 
 
}

<ul id="first"> 
 
    <li><a href="tutorial.html">Learn to code</a></li> 
 
</ul>

Answer 3

@Alessi 42は正しい解決策をコメントしましたが、Dekelはそれを投稿した人でした。

私はバイオリンを行なったし、確実性を検証します。https：// jsfiddle.net/drpeck/tgeyfpd8/

だから私が言うの経験から学ぶ：

1. CSSとない最初のテストは、 CSSなしで要素が表示されると判断したら、
2. CSSセレクタの導入を開始し、さまざまな属性の追加/削除を開始します。
3. 影響を受ける属性が見つかったら、値を指定して再生します。

絶対パスが必要なわけではありませんが、ファイルがルートディレクトリの下にあっても、私は個人的に予期せぬ誤解（つまり明快さ）を避けることができます。すなわち：この

Insted：のhref = "tutorial.html"私はHREFをするだろう= "./ tutorial.html"