移动侧边栏的位置

Question

我的页面上有<div style="max-height: X"> <fieldset> position: relative; top: -9px;内的padding-top: 9px。

正如您所看到的，存在一个小问题：红色箭头指向的区域看起来不自然。滚动条应比现在开始时高出9px！

将{{1}}添加到div并将{{1}}添加到ul不会滚动时修复它，但是一旦开始滚动，事情开始变得奇怪：

我需要这两个：

• 您在第一张图片中看不到间隙（红色箭头指示）
• 向下滚动时，第3张图片中不应出现重叠问题

Answer 1

尝试这样的事情：

http://jsfiddle.net/HerrSerker/WY3dj/165/

使用fieldset的位置相对来设置图例的绝对位置; 然后你可以用top / margin-top将你的传奇转移到顶部

Answer 2

我希望这有效..
小提琴 - http://jsfiddle.net/WY3dj/197/

Answer 3

这是一个视觉上一致的解决方案，这可能是单独使用HTML / CSS可以做到的最好的解决方案（如果您坚持使用该外观）并且可以根据需要轻松调整。

http://jsfiddle.net/WY3dj/198/

Answer 4

你可以将span放在滚动图例下面，在'legend'和'div'之间创建一个图层，这样它就会隐藏'div'并且在滚动时不会与'legend'重叠。

像这样：

<fieldset class="scroll">
    <legend>Scroll:</legend>
    **<span class="stopoverlap"></span>**
    <div>

现在您可以像这样创建'stopoverlap'css：

.stopoverlap {
    display: block;
    position: absolute;
    height: 5px;
    top: 10px;
    background-color: #ffffff;
    width: 80%;    
    z-index: 2;
}

您还必须在scroll fieldset下为'legend'和'div'定义z-index，并且它们的位置相对于此：

fieldset.scroll div {
    position: relative;
    top: -9px;
    **z-index: 1;**
}

和

legend {
    font-weight: bold;
    margin-left: 5px;
    **position: relative;**
    **z-index : 3;**
}

您的卷轴将如下所示：

希望这有帮助

编辑： 不要在代码中加**，因为这只是指定更改或添加。

Answer 5

在CSS中，替换top: -9px的值并将其设为0px。

fieldset.scroll div
{
    position: relative;
    top: 0px;
}

在这里小提琴：http://jsfiddle.net/WY3dj/10/

Answer 6

您需要从fieldset.scroll div

中删除所有样式

Answer 7

在这里，为您修复：http://jsfiddle.net/WY3dj/172/

• 字段集内的两个嵌套div
• 稍微改变了你的CSS

测试1：Firefox 13

测试2：Internet Explorer 9

Answer 8

尝试这个简单的解决方案：

http://jsfiddle.net/WY3dj/210/

要避免重叠问题，只需更改以下元素的CSS样式：

legend
{
    font-weight: bold;
    margin-left: 5px;
    background-color: #fff;
    position:relative;
    z-index:1;
}

Answer 9

添加浮动：左;清除：对于这些项目，可能会解决很多问题。