Я применил фрагмент, который отображает мою проблему. Я пытаюсь заставить элемент .navigation оставаться фиксированным поверх цветных элементов div, однако, правильно: 0; заставляет элемент .navigation переходить к правой стороне тела вместо контейнера родительского элемента. Почему это происходит?

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.75);
}

body {
  background-color: #f1f1f1;
  font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1.8rem;
}

.wrapper {
  width: 70%;
  margin: 0 auto;
}

.container {
  position: relative;
}

.navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  right: 0;
}

.navigation div {
  padding: 20px;
  font-weight: 600;
  font-size: 1.3em;
}

section {
  height: 100vh;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}
<main class='container wrapper'>
  <nav class='navigation'>
    <div>
      About
    </div>
    <div>
      Projects
    </div>
    <div>
      Contact
    </div>
  </nav>

  <section class='about one'>

  </section>

  <section class='projects two'>
    <div class="">
      <a href="#">Test1</a>
    </div>
    <div class="">
      <a href="#">Test2</a>
    </div>
    <div class="">
      <a href="#">Test3</a>
    </div>
  </section>

  <section class='contact three'>

  </section>
</main>
0
Bobimaru

1 ответ

Позиция fixed всегда относительно области просмотра. Вы можете попробовать использовать sticky с комбинацией float:right; и top:0;, но это решение не будет работать в IE.

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  list-style-type: none;
  color: rgba(0, 0, 0, 0.75);
}

body {
  background-color: #f1f1f1;
  font-family: 'Helvetica', 'Helvetica Neue', 'Arial', sans-serif;
  line-height: 1.8rem;
}

.wrapper {
  width: 70%;
  margin: 0 auto;
}

.container {
  position: relative;
}

.navigation {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* modified part: */
  position: sticky;
  float: right;
  top: 0;
}

.navigation div {
  padding: 20px;
  font-weight: 600;
  font-size: 1.3em;
}

section {
  height: 100vh;
}

.one {
  background-color: red;
}

.two {
  background-color: blue;
}

.three {
  background-color: green;
}
<main class='container wrapper'>
  <nav class='navigation'>
    <div>
      About
    </div>
    <div>
      Projects
    </div>
    <div>
      Contact
    </div>
  </nav>

  <section class='about one'>

  </section>

  <section class='projects two'>
    <div class="">
      <a href="#">Test1</a>
    </div>
    <div class="">
      <a href="#">Test2</a>
    </div>
    <div class="">
      <a href="#">Test3</a>
    </div>
  </section>

  <section class='contact three'>

  </section>
</main>
58566605