将 position fixed item inside d-flex 放置到右手大小

Question

我正在尝试在屏幕右侧制作一个字母导航栏。此栏的目的是让用户导航到基于字母表 select 的正确国家/地区代码。

我试图通过包装国家代码选项和带有“d-flex flex-row”的 div 内的导航栏来实现这一点，并将导航栏的位置设置为固定。（使选项和导航栏并排）

但我注意到导航栏始终位于屏幕左侧而不是右侧。有人知道解决这个问题吗？

非常感谢！！！

这是输出的屏幕截图：

代码如下：

HTML

<div class="d-flex flex-row">
      <div class="flex-grow-1">
        <country-code-category prefix="A" id="countryStartWithA" />
        <country-code-category prefix="B" id="countryStartWithB" />
        <country-code-category prefix="C" id="countryStartWithC" />
      </div>

      <div class="style-shortcut-navigation scss-clickable">
        <a href="#countryStartWithA">A</a>
        <a href="#countryStartWithB">B</a>
        <a href="#countryStartWithC">C</a>
      </div>
    </div>

CSS

.style-shortcut-navigation {
  display: flex;
  flex-direction: column;
  font-size: 10.25px;
  color: $text-blue;
  height: 100vh;
  position: fixed;
  width: 100%;
  max-width: 10px;
}

.style-shortcut-navigation > a {
  text-decoration: none;
}

Answer 1

parentSelector (the drop down list) {
    position: relative;
}
 
.style-shortcut-navigation or .d-flex.flex-row {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
}

可能是因为宽度是 100%，所以它没有向右移动的空间，请添加更小的宽度，例如“auto”或 text-align: right 或 align-items: flex-end on .style-shortcut-navigation

Answer 2

乍一看，我猜你的问题在于在 css 中分配“位置：固定”。固定位置分配覆盖了很多行为，只是把它放在屏幕上的某个地方。

可能的解决方案：（只需试验最适合您的方法）为固定位置分配值，或将位置设置为粘性

具有值的固定位置

    .style-shortcut-navigation {
        display: flex;
        flex-direction: column;
        font-size: 10.25px;
        color: $text-blue;
        height: 100vh;
        position: fixed;
        top: 0; /*Or whatever offset from the top of the page you need*/
        right: 0; /*Or whatever offset from the right of the page you need*/
        width: 100%;
        max-width: 10px;
    }

置顶

    .style-shortcut-navigation {
        display: flex;
        flex-direction: column;
        font-size: 10.25px;
        color: $text-blue;
        height: 100vh;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0; /*Or whatever offset from the top of the page you need*/
        right: 0; /*Or whatever offset from the right of the page you need*/
        width: 100%;
        max-width: 10px;
    }

有关位置值行为方式的更多信息，请查看 w3schools。

Answer 3

你改变固定位置甚至相对位置，然后使用边距将它移动到另一边。您还可以更改对齐方式，使其位于右侧。

将 position fixed item inside d-flex 放置到右手大小

Place position fixed item inside d-flex to right hand size

html

css

flexbox