我是.html的新手,自学成才,完成了一个网站,但是我的标题出现了一些问题。
我有一些可在悬停时缩放的文本,但是如果文本的一部分被标题遮盖,则文本会缩放并出现在标题的[[顶部中,如何解决此问题?
我提供了一个片段来说明我的意思。/************************** Header *******************/
header {
min-height: 150px;
background: #ccc;
position: fixed;
width: 100%;
}
header ul{
display: inline;
text-align: left;
}
header ul li{
margin-left: 0px;
padding: 2px;
}
header ul li:first-child{
margin-left: 0px;
padding: 2px;
}
header ul li:last-child{
margin-bottom: 30px;
padding: 2px;
}
.spacer{
height: 150px;
}
/********************* Table & Buttons ******************/
.select{
height: 100%;
background-color: #f2f2f2;
padding-top: 35px;
padding-bottom: 35px;
}
.category {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
height: 10%;
background-color: #f2f2f2;
text-align: center;
font-size: xx-large;
}
.mb, .ce{
width: 50%;
}
.mb{
border-right: 2px solid #2F4858;
}
.mb:hover, .ce:hover{
transform: scale(1.1);
transition: transform .2s;
}
.sub{
text-align: center;
font-size: x-large;
width: 100%;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.spacer2 {
height: 140px;
background: #f2f2f2;
}
<header>
<nav>
<ul>
<li>
<a>Home</a>
</li>
<li class="current">
Portfolio
</li>
<li>
<a>About</a>
</li>
<li>
<a>Contact / Services</a>
</li>
</ul>
</nav>
</header>
<section class="spacer">
</section>
<seciton>
<div class="sub">
<p> Links </p>
</div>
<div class="select">
<table class="category">
<tr>
<td class="mb" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number One</p>
</button>
</td>
<td class="ce" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number Two</p>
</button>
</td>
</tr>
</table>
</div>
</seciton>
<section class="spacer2">
</section>
z-index
和您的header
上使用section
(请小心,您曾经写过seciton
一次是骗子: /************************** Header *******************/
header {
min-height: 150px;
background: #ccc;
position: fixed;
width: 100%;
z-index: 1; /* ---Set a z-index here--- */
}
header ul{
display: inline;
text-align: left;
}
header ul li{
margin-left: 0px;
padding: 2px;
}
header ul li:first-child{
margin-left: 0px;
padding: 2px;
}
header ul li:last-child{
margin-bottom: 30px;
padding: 2px;
}
.spacer{
height: 150px;
}
/********************* Table & Buttons ******************/
.select{
height: 100%;
background-color: #f2f2f2;
padding-top: 35px;
padding-bottom: 35px;
}
.category {
margin: 0 auto;
width: 90%;
border-collapse: collapse;
height: 10%;
background-color: #f2f2f2;
text-align: center;
font-size: xx-large;
}
.mb, .ce{
width: 50%;
}
.mb{
border-right: 2px solid #2F4858;
}
section {
z-index: 0; /* ---And another here that is lower--- */
}
.mb:hover, .ce:hover{
transform: scale(1.1);
transition: transform .2s;
z-index: 0;
}
.sub{
text-align: center;
font-size: x-large;
width: 100%;
}
.btn {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.spacer2 {
height: 140px;
background: #f2f2f2;
}
<header>
<nav>
<ul>
<li>
<a>Home</a>
</li>
<li class="current">
Portfolio
</li>
<li>
<a>About</a>
</li>
<li>
<a>Contact / Services</a>
</li>
</ul>
</nav>
</header>
<section class="spacer">
</section>
<section>
<div class="sub">
<p> Links </p>
</div>
<div class="select">
<table class="category">
<tr>
<td class="mb" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number One</p>
</button>
</td>
<td class="ce" >
<button class="btn" style="height: 100%;">
<p style="font-size: xxx-large">Button Number Two</p>
</button>
</td>
</tr>
</table>
</div>
</section>
<section class="spacer2">
</section>
⚠️我真的建议您将所有不在标头中的内容包装在<main></main>
组件中,以轻松编写这种类型的清洁器CSS规则:
header { z-index: 1; } main{ z-index: 0; }