Позиционирование элемента справа HTML/CSS

Question

Есть кнопка смены цветовой темы и хотелось бы чтобы она располагалась не в верхнем левом углу, как на картинке, а в правом.

Сама кнопка находится в элементе top_bar (пишу на VueJS):

<div class="collection">
<div v-on:click="toggleDarkMode">
   <svg width="30" height="30" viewBox="0 0 48 48">
       <path d="M22 41C32.4934 41 41 32.4934 41 22C41 11.5066 32.4934 3 223C11.5066 3 3 11.5066 3 22C3 32.4934 11.5066 41 22 41ZM7 22C7
                13.7157 13.7157 7 22 7V37C13.7157 37 7 30.2843 7 22Z"></path>
   </svg>
</div>
</div>

CSS:

.collection{
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        overflow: hidden;
    }

Далее элемент top_bar подключается в другой элемент index:

<template>
    <div class="all">
        <section id="head-section">
        <div v-bind:class="bg"></div>
        <top_bar :toggle-dark-mode="toggleDarkMode" class="top-bar"></top_bar>
        ...
</template>

Также хочу чтобы кнопка имела свойство position: fixed:

.top-bar {
    position: fixed;
}

При выставлении данного свойства кнопка меняет свой угол расположения с правого на левый.

Помогите понять почему

Answer 1

Дефолтное значение абсолютно позиционированных элементов это top: 0, left: 0.

Когда Вы добавляете свойство position отличное от static Вам следует указывать месторасположение элемента explicitly, если Вы хотите что бы оно отличалось от значений по умолчанию:

.top-bar {
    position: fixed;
    right: 0;
}

БЛОГ НА HUSL

Позиционирование элемента справа HTML/CSS

Ответы (1 шт):