Почему мой фиксированный элемент идет к правой стороне всего экрана, а не к правой стороне своего родительского элемента?

Question 1

Я применил фрагмент, который отображает мою проблему. Однако я пытаюсь сделать так, чтобы элемент .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>

html css

0

Bobimaru 26 Окт 2019 в 01:48

Вы ищете abolute не исправлено

–

Temani Afif

26 Окт 2019 в 01:50

Но я хочу, чтобы этот div оставался фиксированным, пока я прокручиваю.

–

Bobimaru

26 Окт 2019 в 01:51

Фиксированные элементы не могут находиться внутри div. Он прилипает к окну и не прилипает к элементам HTML.

–

James

26 Окт 2019 в 01:53

1

То вы ищете позицию sticky

–

Temani Afif

26 Окт 2019 в 01:54

1

Я советую вам изменить свой вопрос, чтобы объяснить, что вы хотите, а не спрашивать, почему фиксированная позиция ведет себя таким образом, потому что дубликатов много, и это вам не поможет.

–

Temani Afif

26 Окт 2019 в 01:55

Answer

Позиция 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>

0

Jax-p 26 Окт 2019 в 01:58

Question 2

Позиция 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>

0

Jax-p 26 Окт 2019 в 01:58

Почему мой фиксированный элемент идет к правой стороне всего экрана, а не к правой стороне своего родительского элемента?

1 ответ

Похожие вопросы

Новые вопросы

html