主页 / 问题 / 1154275
Accepted
icYFTL
Asked:2020-07-18 15:51:43 +0000 UTC2020-07-18 15:51:43 +0000 UTC

将元素定位到正确的 HTML/CSS

  • 772

描述

有一个用于更改颜色主题的按钮，我希望它不像图片那样位于左上角，而是位于右侧。

按钮本身在元素中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;
}

设置此属性时，按钮从右到左更改其位置角度。

帮我理解为什么

html

1 个回答

  1. Best Answer

    绝对定位元素的默认值为top: 0, left: 0。

    添加属性时，如果您希望它position不同于static默认值，则必须明确指定元素的位置：

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

相关问题