有没有办法根据屏幕尺寸完全移动元素位置？ CSS

Question

所以我现在正在尝试学习 HTML 和 CSS，还没有进入 jvS。我正在尝试创建响应式设计，并且我以某种方式理解媒体查询。

基本上，我在桌面上有一个屏幕大小宽度的导航栏，里面有一个徽标。当我获得手机尺寸时，我希望该徽标移动到屏幕的右下角并粘在那里。

当你想发帖时，你知道在 Twitter 上加号吗？我想做这样的事情。但是我想知道我是否可以移动已经为导航栏创建的元素，还是需要一个全新的元素？

这是 HTML

header {
    background-color: chartreuse;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 20px;
}

<header>
    <img class="logo" src="/Assets/Logo.png" alt="logo">
    <nav>
        <ul class = "links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Recipes</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <a class="cta" href="#"><button>Youtube</button> </a>
</header>

而且我基本上需要该徽标在小于 500 像素的屏幕上移动到屏幕的右下方。我找不到任何答案，所以如果您有任何建议，请帮助我！

Answer 1

要从文档流中取出一个元素并将其固定在屏幕上的特定位置，您可以使用position: fixed 和顶部/底部/左侧/右侧参数，您可以将所有这些放入媒体查询中仅在特定屏幕尺寸以下应用。

Answer 2

我想通了。这些人帮我解决了这个问题：固定。

然后我的问题是，由于某种原因，底部：0 和右侧：0 会将我的徽标放在顶部而不是底部。那是因为我之前尝试不同的东西时有另一个媒体查询，然后忘记了。

感谢您的帮助！

Answer 3

您可以通过使用position: fixed 来实现此目的。此规则在元素上指定固定位置，换句话说，这意味着无论您的页面在水平或垂直方向上有多大，该元素都将保持在同一个位置。

poistion: fixed 的工作方式与position: absolute 几乎相同。您根据父相关元素指定元素的定位。这是您要查找的 CSS：

@media screen and (max-width: 499px) {
  .logo {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
}

请记住，每个父元素（图片上方的每个元素）不能拥有position: relative，因为bottom 和right 规则将从底部和右侧部分开始计算相对元素。图片上方唯一可以指定position: relative 的标签是body 或html。