英文:
I can't click on the links because the header takes up all of my site
问题
<div>内部的链接不可点击，而且出现了整个网站都被<header>覆盖的情况，我无法解决。<nav>内部的链接工作正常，但在链接内部的<header>无法工作。
如何解决这个问题？
以下是你的HTML和CSS代码的翻译：
<html>
<body>
<header>
<div class="background">
<div class="homepage">
<div class="block">
<img class="lock" src="images/img.png">
<p class="title">thehamam 是什么？</p>
<a id="rules" href="https://thehamam.com/rules" target="_blank"><span>我们的规则</span></a>
<p>如果要用三个词来总结，那将是"自由社交网络"。如果要详细解释，那就是在今天的平台中没有限制，任何人都可以匿名留存的唯一社交网络。请记住，thehamam会像亲生孩子一样保护你的数据！</p>
</div>
<div class="block">
<img class="lock" src="/images/pepe.png">
<p class="title">这个社交网络上可以做什么？</p>
<p>您可以选择一个主题并发布帖子，上传文件，选择适合您心情的表情符号并回复帖子。我们的规则不会限制你，你可以自由表达你的想法。</p>
</div>
<p id="end">这个页面的底部了！</p>
</div>
</div>
</header>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Skyline Beach NBP', sans-serif;
list-style: none;
}
.material-symbols-sharp {
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48;
}
html,
body {
margin: 0;
padding: 0;
min-width: 100%;
z-index: 0;
}
.material-symbols-sharp {
color: #dadada;
z-index: 2;
}
.background {
position: relative;
display: flex;
justify-content: space-evenly;
padding: 120px;
padding-top: 10px;
top: 0;
width: 100%;
height: 1920px;
background-color: #121212;
z-index: -1;
}
.homepage {
position: relative;
background-color: transparent;
border: 1px solid #1a1a1a;
margin-top: 90px;
width: 1105px;
height: 1720px;
border-radius: 10px;
z-index: 999;
padding: 10px;
}
.block {
text-align: center;
width: 50%;
padding: 10px;
float: left;
display: block;
}
.lock {
width: 100px;
height: 100px;
margin: 0;
outline: 1px solid #252525;
}
.rules {
position: relative;
z-index: 999;
}
em {
font-size: 20px;
letter-spacing: 1px;
font-style: normal;
text-decoration: 1.5px underline #dadada;
}
p {
font-family: 'Skyline Beach NBP', sans-serif;
color: #dadada;
font-size: 20px;
letter-spacing: 0.2px;
}
.title {
margin: 0;
margin-bottom: 10px;
color: #dadada;
font-size: 24px;
position: relative;
}
a,
a:link,
a:visited {
font-family: 'Skyline Beach NBP', sans-serif;
font-size: 20px;
color: #dadada;
text-decoration: 1.5px underline #3c3c3c;
z-index: 22;
}
input[type="text"]:focus {
border: none !important;
outline: none !important;
}
这是你代码的翻译部分。希望对你有所帮助。
英文:
Links inside <div> are not clickable. and for some reason the whole site is covered with <header>, I couldn't figure it out. Links (<a>) inside <nav> working but <header> inside links not working.
how can I solve this problem?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Skyline Beach NBP', sans-serif;
list-style: none;
}
.material-symbols-sharp {
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48
}
html,
body {
margin: 0;
padding: 0;
min-width: 100%;
z-index: 0;
}
.material-symbols-sharp {
color: #dadada;
z-index: 2;
}
.arkaplan {
position: relative;
display: flex;
justify-content: space-evenly;
padding: 120px;
padding-top: 10px;
top: 0;
width: 100%;
height: 1920px;
background-color: #121212;
z-index: -1;
}
.anasayfa {
position: relative;
background-color: transparent;
border: 1px solid #1a1a1a;
margin-top: 90px;
width: 1105px;
height: 1720px;
border-radius: 10px;
z-index: 999;
padding: 10px;
}
.blok {
text-align: center;
width: 50%;
padding: 10px;
float: left;
display: block;
}
.lock {
width: 100px;
height: 100px;
margin: 0;
outline: 1px solid #252525;
}
.kurallar {
position: relative;
z-index: 999;
}
em {
font-size: 20px;
letter-spacing: 1px;
font-style: normal;
/* Removes italics */
text-decoration: 1.5px underline #dadada;
/* Makes underline */
}
p {
font-family: 'Skyline Beach NBP', sans-serif;
color: #dadada;
font-size: 20px;
letter-spacing: 0.2px;
}
.baslik {
margin: 0;
margin-bottom: 10px;
color: #dadada;
font-size: 24px;
position: relative;
}
a,
a:link,
a:visited {
font-family: 'Skyline Beach NBP', sans-serif;
font-size: 20px;
color: #dadada;
text-decoration: 1.5px underline #3c3c3c;
z-index: 22;
}
input[type="text"]:focus {
border: none!important;
outline: none!important;
}
<!-- language: lang-html -->
<html>
<body>
<header>
<div class="arkaplan">
<div class="anasayfa">
<div class="blok">
<img class="lock" src="goruntuler/img.png">
<p class="baslik">thehamam nedir?</p>
<a id="kurallar" href="https://thehamam.com/kurallar" target="_blank"><span>kurallarımız</span></a>
<p>eğer 3 kelime ile özetleyecek olursak "özgür sosyal ağ" olacaktır. genişçe tanımlarsak günümüz platformlarındaki kısıtlamaların bulunmadığı isteyen kişilerin anonim kalabileceği yegane ağ. unutmayın, thehamam verilenizi canı gibi korur!</p>
</div>
<div class="blok">
<img class="lock" href="/" src="goruntuler/pepe.png">
<p class="baslik">peki bu ağda ne yapılıyor?</p>
<p>onlarca konudan birini seçip gönderi oluşturabilir, dosya yükleyebilir, ruh halinizi yansıtacak wojağınızı seçebilir ve gönderilere cevap verebilirsiniz. kurallarımız baskıcı değildir. fikirlerinizi özgürce ifade edebilirsiniz.</p>
</div>
<p sid="son" bu sayfanın sonu olsa gerek!></p>
</div>
</div>
</header>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
尝试将 .arkaplan 的 z-index 设置为 1000：
.arkaplan {
position: relative;
display: flex;
justify-content: space-evenly;
padding: 120px;
padding-top: 10px;
top: 0;
width: 100%;
height: 1920px;
background-color: #121212;
z-index: 1000;
}
英文:
Try setting z-index for .arkaplan to 1000:
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-css -->
* {
padding: 0;
margin: 0;
box-sizing: border-box;
text-decoration: none;
font-family: 'Skyline Beach NBP', sans-serif;
list-style: none;
}
.material-symbols-sharp {
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 48
}
html,
body {
margin: 0;
padding: 0;
min-width: 100%;
z-index: 0;
}
.material-symbols-sharp {
color: #dadada;
z-index: 2;
}
.arkaplan {
position: relative;
display: flex;
justify-content: space-evenly;
padding: 120px;
padding-top: 10px;
top: 0;
width: 100%;
height: 1920px;
background-color: #121212;
z-index: 1000;
}
.anasayfa {
position: relative;
background-color: transparent;
border: 1px solid #1a1a1a;
margin-top: 90px;
width: 1105px;
height: 1720px;
border-radius: 10px;
z-index: 999;
padding: 10px;
}
.blok {
text-align: center;
width: 50%;
padding: 10px;
float: left;
display: block;
}
.lock {
width: 100px;
height: 100px;
margin: 0;
outline: 1px solid #252525;
}
.kurallar {
position: relative;
z-index: 999;
}
em {
font-size: 20px;
letter-spacing: 1px;
font-style: normal;
/* Removes italics */
text-decoration: 1.5px underline #dadada;
/* Makes underline */
}
p {
font-family: 'Skyline Beach NBP', sans-serif;
color: #dadada;
font-size: 20px;
letter-spacing: 0.2px;
}
.baslik {
margin: 0;
margin-bottom: 10px;
color: #dadada;
font-size: 24px;
position: relative;
}
a,
a:link,
a:visited {
font-family: 'Skyline Beach NBP', sans-serif;
font-size: 20px;
color: #dadada;
text-decoration: 1.5px underline #3c3c3c;
z-index: 22;
}
input[type="text"]:focus {
border: none!important;
outline: none!important;
}
<!-- language: lang-html -->
<html>
<body>
<header>
<div class="arkaplan">
<div class="anasayfa">
<div class="blok">
<img class="lock" src="goruntuler/img.png">
<p class="baslik">thehamam nedir?</p>
<a id="kurallar" href="https://thehamam.com/kurallar" target="_blank"><span>kurallarımız</span></a>
<p>eğer 3 kelime ile özetleyecek olursak "özgür sosyal ağ" olacaktır. genişçe tanımlarsak günümüz platformlarındaki kısıtlamaların bulunmadığı isteyen kişilerin anonim kalabileceği yegane ağ. unutmayın, thehamam verilenizi canı gibi korur!</p>
</div>
<div class="blok">
<img class="lock" href="/" src="goruntuler/pepe.png">
<p class="baslik">peki bu ağda ne yapılıyor?</p>
<p>onlarca konudan birini seçip gönderi oluşturabilir, dosya yükleyebilir, ruh halinizi yansıtacak wojağınızı seçebilir ve gönderilere cevap verebilirsiniz. kurallarımız baskıcı değildir. fikirlerinizi özgürce ifade edebilirsiniz.</p>
</div>
<p sid="son" bu sayfanın sonu olsa gerek!></p>
</div>
</div>
</header>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论