Javascript 使导航卫星正好位于图像和视口右侧之间。 我试图让导航div坐在图像和右边页面中间，但是如果浏览器被调整大小，仍然会保持关系。我很肯定我知道如何使用相对定位，但我想固定导航

[img]导航|视口右侧

#wrapperNav {
    position: fixed;
    top: 45%;
    right: 50%;
    z-index:999;
}

---

代码：

您需要添加位置：相对到您的容器，在本例中，该容器是nav html元素

---

这可能会有所帮助。因此，如果您的图像宽度为90%且居中，则页面空间将剩下10%，图像两侧各有5%

如果我对你的图纸理解正确，那就意味着你希望你的导航设备所在的容器

width: 5%
position:fixed;
top: 50%;
right:0;
margin-top -150px;   // half the height
height: 300px;
text-align:center;

5%宽度将占用右边的整个空间，但是使用<代码>文本对齐：Center 会在中间得到项目，就像您在绘图上的“相等”注释一样。

如果您需要JSFIDLE，请告诉我

---

这里有一个小问题：

Flexbox在大多数较新的桌面和移动浏览器中都有支持，并且真正省去了试图在不同屏幕尺寸下保持对齐和定位所涉及的大量黑客行为；它弯曲

对于您描述的旋转木马，我将根据您在小提琴中提供的内容，从以下HTML开始：

 <div id="wrapper">

    <nav class="nav nav--ready">
        <div class='nav__center'>
            <div class="nav__link nav__link--active">
                <a class="nav__link-bullet" href="#one">1</a>
            </div>

            <div class="nav__link">
                <a class="nav__link-bullet" href="#two">2</a>
            </div>

            <div class="nav__link">
                <a class="nav__link-bullet" href="#three">3</a>
            </div>

            <div class="nav__link">
                <a class="nav__link-bullet" href="#four">4</a>
            </div>

            <div class="nav__link">
                <a class="nav__link-bullet" href="#five">5</a>
            </div>
        </div>
    </nav>

    <div class='carousel'>
        <img src="" alt=""/>
    </div>
 </div>  

#wrapper

是flexbox，

.nav

也是flexbox，

.nav\u center

也是flexbox<代码>#包装设置为

弹性方向：行反向

以便在右侧显示导航，如果我们在

#wrapper

中添加另一个元素，它将显示在

.nav

的右侧

.nav

本身设置为

弹性方向：行

，虽然它只有一个子项：

.nav_uucenter

，但它的flexbox样式的

证明了内容的合理性：周围的空间和
对齐项目：居中无论发生什么情况，保持导航按钮在其中心对齐。在
.nav
中，
.nav\uu center
设置为
弹性方向：列使其内容从上到下显示，并且这些样式
自对齐：拉伸；证明内容：周围的空间从上到下均匀分布每个
.nav\u链接
元素

这是一本书。请注意，导航将固定在旋转木马的右侧。我在
.nav
上设置了一个最小宽度，这样即使显示器非常小，它也不会消失

这里有一个很快的方法，你可以在十分钟内喝一杯咖啡就搞定。
很难说清楚你到底在干什么asking@elzi希望那张照片有帮助？我只是希望导航始终位于视口右侧和图像之间的相等距离上。您需要支持旧版IE吗？使用flexbox可以非常轻松、可靠地完成此操作。任何其他的方法都会被破解，一想到它就让我头疼。不，只是当前的浏览器已经足够好了。我会做一个简化的提琴来让你继续…我不懂。你的演示和我的一样。包装器不需要是相对的吗？试着调整浏览器窗口的大小，或者我不太理解你的问题。调整大小时是否需要将图像居中？如果我不清楚，请原谅。目前，图像的大小调整得很好。但是，我希望导航定位在图像右侧，距离等于与视口右侧的距离。[IMG]EQUAL[NAV]EQUAL[Right edge of viewport]如果我现在添加它，它所做的就是将整个导航移动到左侧。我还需要一个正确的答案吗：xx%？对不起，请看我的最新答案。使用背景色也可以调试它的位置。您的
网格垫
正在添加左侧填充：20px，而您的导航包裹具有右侧填充：20px，因此我会将它们全部剥离。。。或者你可能会得到不完美的结果。我仍然无法得到图像和导航以及视口右侧和导航之间相等的距离。问题是，我基本上需要固定导航，而你仍然可以滚动页面，因为我有多个旋转木马。想知道这是否可以用js实现。谢谢你的阅读！非常有用。刚刚设置。导航到位置：固定；给它一个高度。给它一个恒定的宽度，比如50px，因为它不再调整了。当屏幕调整时，它仍然会粘在右边缘，而不是水平滚动时；因为它是固定的。