时间戳

首页 > 解决方案 > 位置绝对与文档流混淆

html - 位置绝对与文档流混淆

问题描述

我正在练习我的 CSS 并想做一个登陆页面。使用了一些我刚刚学到的绝对和相对概念，但是一旦我设计了主要部分的样式，它似乎已经掩盖了我想在文档中添加的下一个内容。生物课不见了。

这是代码：

.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em;
    position: relative;
    z-index: 1;
}

.nav-logo{
    text-transform: uppercase;
    color: #fff;
    font-size: 2em;
    padding: 0.3em; 
}

.nav-ul{
    display: flex;
    align-items: center;
    justify-content: center;
    list-style-type: none;
}

.nav-ul li a{
    display: inline-block;
    padding: 10px 20px; 
    font-weight: 600;
    text-decoration: none;
    color: #fff; /* 4cabe9 */
    transition: all 0.3s ease-in-out;
}

.nav-ul li a:hover{
    color: #449ad2;
}

.hero{
    height: 100vh;
    width: 100%;
    background: linear-gradient(270deg, rgba(0, 72, 124, 0.9) 0%, rgba(0, 0, 0, 1) 100%), 
    url('/images/fitness.jpg') center no-repeat;
    background-position: center center;
    background-size: cover;
    transform: scaleX(-1);
    top: 0;
    position: absolute;
}

.hero-text{
    position: absolute;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 50%;
    text-align: center;
    width: 100%;
    transform: translate(-50%, -50%) scaleX(-1);
}

.hero-text{
    text-transform: uppercase;
    font-size: 1.7em;
    padding: 20px;
}

.hero-cta{
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(252, 171, 16, 1) 0%, rgba(252, 171, 16, 1) 100%);
    border: none;
    margin-top: 1em;
    border-radius: 100px;
    color: #fff;
    padding: 1em;
    box-shadow: 2px 4px 7px 1px rgba(252, 171, 16, 0.3);
    font-family: 'Montserrat', sans-serif;
    transition: all 0.3s ease-in-out;
}

.hero-cta:focus{
    outline: none;
}

.hero-cta:hover{
    font-size: 0.55em;
}

.bio{
    height: 40%;
}
<section>
    <div class="nav">
        <h1 class="nav-logo">Monk<small style="color: #FCAB10">+</small></h3>
        <ul class="nav-ul">
            <li><a href="#">Services</a></li>
            <li><a href="#">Testimonials</a></li>
            <li><a href="#">Tribe</a></li>
            <li><a href="#">Join Us</a></li>
        </ul>
    </div>
    
    <div class="hero">
        <div class="hero-text">
            <h1>Make the best out of you today</h1>
            <button class="hero-cta">Choose a program</button>
        </div>
    </div>
</section>

<section>
    <div class="bio">
        <h1>Biography</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum doloremque atque ab delectus culpa soluta facere accusantium nostrum saepe nam?</p>
    </div>
</section>

处理这个问题的正确方法是什么，我如何设计它以使其正确？

标签： htmlcss

解决方案

也许使用 section 作为 flex 容器和没有绝对值的 margin 可以避免内容相互重叠。

一个可能的开始：

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
  z-index: 1;
}

.nav-logo {
  text-transform: uppercase;
  color: #fff;
  font-size: 2em;
  padding: 0.3em;
}

.nav-ul {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
}

.nav-ul li a {
  display: inline-block;
  padding: 10px 20px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  /* 4cabe9 */
  transition: all 0.3s ease-in-out;
}

.nav-ul li a:hover {
  color: #449ad2;
}

section {
  height: 100vh;
  width: 100%;
  background: linear-gradient(270deg, rgba(0, 72, 124, 0.9) 0%, rgba(0, 0, 0, 1) 100%), url('/images/fitness.jpg') center no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  color: white;
}

.hero {
  margin: auto;
  padding-bottom: 3em;
}

.hero-text {
  color: #fff;
  text-align: center;
}

.hero-text {
  text-transform: uppercase;
  font-size: 1.7em;
  padding: 20px;
}

.hero-cta {
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(252, 171, 16, 1) 0%, rgba(252, 171, 16, 1) 100%);
  border: none;
  margin-top: 1em;
  border-radius: 100px;
  color: #fff;
  padding: 1em;
  box-shadow: 2px 4px 7px 1px rgba(252, 171, 16, 0.3);
  font-family: 'Montserrat', sans-serif;
  transition: all 0.3s ease-in-out;
}

.hero-cta:focus {
  outline: none;
}

.hero-cta:hover {
  font-size: 0.55em;
}

.bio {
  height: 40%;
}
<section>
  <div class="nav">
    <h1 class="nav-logo">Monk<small style="color: #FCAB10">+</small></h3>
      <ul class="nav-ul">
        <li><a href="#">Services</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Tribe</a></li>
        <li><a href="#">Join Us</a></li>
      </ul>
  </div>
  <div class="hero">
    <div class="hero-text">
      <h1>Make the best out of you today</h1>
      <button class="hero-cta">Choose a program</button>
    </div>
  </div>
</section>
<section>
  <div class="bio">
    <h1>Biography</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum doloremque atque ab delectus culpa soluta facere accusantium nostrum saepe nam?</p>
  </div>
</section>

推荐阅读