时间戳

首页 > 解决方案 > 如何确保一个元素不被另一个（CSS）覆盖？

html - 如何确保一个元素不被另一个（CSS）覆盖？

问题描述

我是网络开发的新手。试图使网站标志看起来不错。有两个元素，其中一个被另一个覆盖，因此用户无法单击其中的第一个。

请帮我把它们放在另一个之上。我怎样才能只使用 CSS 来做这些事情？

代码笔： https ://codepen.io/h071/pen/YOeXaw

这是 HTML 部分：

<header>

<link rel="stylesheet" type="text/css" href="/a/www/css/style_header.css">

<nav class="container-fluid">
  <a class="logo" href="/a/www/index.php">
    <span>Sitename</span>
  </a>

<p id="reg-auth-title"><a href="/a/include/reg_auth.php">Login|Registration</a></p>

这是CSS：

header {
width: 100%;
height: 5em;
position: relative;
}
nav {
width: 100%; 
}

.logo {
display: block;
float: left;
position: absolute;
margin-top: 0.4em;
margin-left: 1em;
}
.logo span {
font-size: 5em;
color: black;
display: inline-block;
/*line-height: 1em;*/
}

#reg-auth-title {
/* width: 20%; */
padding: 0;
margin: 0;
float: left;
}
#reg-auth-title a.top-auth {
font: bold 15px sans-serif;
text-decoration: none;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
border: 1px solid red;
border-radius: 5px;  /*other browsers*/
-webkit-border-radius: 5px; /*safari*/
-moz-border-radius: 5px;
cursor: pointer;
color: black;
}

#reg-auth-title a.top-auth:hover {
text-decoration: none;
}

#reg-auth-title a {
font: 15px sans-serif;
font-weight: bold;
text-decoration: none;
color: #58ACFA;
margin-left: 1em;
border-bottom-style: dashed;
border-bottom-color: #58ACFA;
border-bottom-width: 1px;
}

标签： htmlcss

解决方案

您需要使用 z-index将链接放在徽标上方。

#reg-auth-title {
    z-index: 10;
    position: relative; // z-index works only with non-static positioned elements
}

推荐阅读