jQuery Mobile：右边的绝对外部面板不工作 [英] jQuery Mobile: absolute external panel on right side not working

问题描述

我想使用外部表头和两个外部面板，一个在左边，一个在右边。抓住：面板应该总是在大屏幕上可见。

I want to use an external header and two external panels, one at the left, one at the right. The catch: The panels should be always visible on big screens.

我有一些问题定位面板与外部标题（内部工作正常），我可以解决

I had some problems positioning the panels with an external header (internal works fine), which I could solve for the left panel when using

position: absolute;
left: 0;
top: 4em;

但是，这不适用于右侧面板，使用

However, this does not work with the right panel, using

position: absolute;
right: 0;
top: 4em;

只是将其放在左侧面板上方。

just places it above the left panel.

您可以在此jsFiddle上看到此信息： https://jsfiddle.net/9eb4mekr/

You can see this on this jsFiddle: https://jsfiddle.net/9eb4mekr/

当我使用 position：relative; float：right; 代替，右边的面板会在右边，但低于每个其他面板（在jsFiddle中试试）。

When I use position: relative; float: right; instead, the right panel will be on the right but below every other panel (try it in the jsFiddle).

想要正确定位外部面板时总是可见（大屏幕）？加上一个外部头？

Any Idea on proper positioning of external panels when always visible (big screens)? Plus an external header?

推荐答案

我发现了问题。嗯，真的不是问题，但至少解决方案，感谢 Tasos Anastasiou ：将标题位置设置为 fixed ，例如在头div中的 data-position =fixed将使相对 / strong> panels：）

I found the problem. Well, not really the problem, but at least the solution, thanks to Tasos Anastasiou: Setting the header position to fixed, e.g. with data-position="fixed" in the header div will make relative positioning work again on both panels :)

这是一个更新的工作jsFiddle： https://jsfiddle.net/vhkmok8o/

Here is an updated, working jsFiddle: https://jsfiddle.net/vhkmok8o/

这篇关于jQuery Mobile：右边的绝对外部面板不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！