问元素在固定显示中不起作用，但在相对显示中起作用
EN

Stack Overflow用户

提问于 2020-07-16 10:09:12

回答 1查看 27关注 0票数 0

对于".header-links“，我试图使链接成为一个固定的显示，但当位置固定时，它会弄乱布局。当位置是相对的时候，它不会弄乱布局，但这不是我想要的。我想要的链接是固定的。

.box {
  background-color: #000033;
  height: 500rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 18rem;
}

hr {
  color: #3d3d5c;
  left: 0;
  position: fixed;
  top: 6rem;
  width: 17.9rem;
}

.header-links a {
  color: #cccfc2;
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 1.2rem;
  padding: 1.5rem;
  position: fixed;
  left: 1rem;
  top: 9rem;
  text-decoration: none;
  text-transform: uppercase;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
  <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
</head>

<body>
  <div class="box"></div>
  <hr>
  <header>
    <nav class="header-links">
      <a href="#Home">Home</a>
      <a href="#About">About</a>
      <a href="#Projects">Projects</a>
      <a href="#Contact">Contact</a>
    </nav>
  </header>
</body>

</html>

html

css

回答 1

Stack Overflow用户

发布于 2020-07-16 10:14:13

要设置固定的元素应为.header-links，而不是其子元素。

.box {
  background-color: #000033;
  height: 500rem;
  left: 0;
  position: absolute;
  top: 0;
  width: 18rem;
}

hr {
  color: #3d3d5c;
  left: 0;
  position: fixed;
  top: 6rem;
  width: 17.9rem;
}

.header-links {
  position: fixed; /* add this and you may also set its position */
}
.header-links a {
  color: #cccfc2;
  display: block;
  font-family: 'Karla', sans-serif;
  font-size: 1.2rem;
  padding: 1.5rem;
  position: relative;
  left: 1rem;
  top: 9rem;
  text-decoration: none;
  text-transform: uppercase;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My Portfolio</title>
  <link rel="stylesheet" type="text/css" href="portfolio.css">
  <link href="https://fonts.googleapis.com/css2?family=Karla&display=swap" rel="stylesheet">
</head>

<body>
  <div class="box"></div>
  <hr>
  <header>
    <nav class="header-links">
      <a href="#Home">Home</a>
      <a href="#About">About</a>
      <a href="#Projects">Projects</a>
      <a href="#Contact">Contact</a>
    </nav>
  </header>
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62926357

复制

相似问题

问元素在固定显示中不起作用，但在相对显示中起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素在固定显示中不起作用，但在相对显示中起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素在固定显示中不起作用，但在相对显示中起作用
EN