html - 静态定位和溢出

Question

我正在尝试编写纯 CSS 工具提示。我担心目标人群可能禁用了 JS:

<div id=items>
    <div id=c1 class=container>
        <input type=image class=option id=o1 value=Sample></input>
        <label for=o1 class=name>
            OxyClean
        </label>
        <label for=o1 class=price>
            $19.95
        </label>
    </div>
    <div id=c2 class=container>
        <input type=image class=option id=o2 value=Sample></input>
        <label for=o2 class=name>
            ShamWow
        </label>
        <label for=o2 class=price>
            $19.95
        </label>
    </div>
    <div id=c3 class=container>
        <input type=image class=option id=o3 value=Sample></input>
        <label for=o3 class=name>
            Gopher
        </label>
        <label for=o3 class=price>
            $19.95
        </label>
    </div>
    <div id=c4 class=container>
        <input type=image class=option id=o4></input>
        <label for=o4 class=name>
            Mighty Tape
        </label>
        <label for=o4 class=price>
            $19.95
        </label>
    </div>
</div>

CSS:

div,label{
    position:absolute; /*Note This*/
}
#items{
    width:100%;
    height:200px;
}
.container{
    width:200px;
    overflow:hidden;
    position:relative;   /*And This*/
}
.container:hover{
    height:300px;
}
.option,.price,.name{
    left:0%;width:100%;
}
.option{
    height:200px;
}
.price,.name{
    height:50px;
}
.price{
    top:250px;   
}
.name{
    top:200px;   
}

当通过删除其中一条注释行来绝对定位容器时，工具提示会起作用，但我不想硬编码或使用脚本来生成这些位置。这就是我希望使用静态定位的原因。

不幸的是，静态定位导致溢出属性停止运行(浏览器没有注意到冲突):

Desired View:

*------------------------------------------------------------------------*
|*-------**-------**-------**-------**-------**-------**-------**-------*|
||       ||       ||       ||       ||       ||       ||       ||       ||
||       ||       ||       ||       ||       || FOCUS ||       ||       ||
||       ||       ||       ||       ||       ||       ||       ||       ||
||       ||       ||       ||       ||       ||       ||       ||       ||
|*-------**-------**-------**-------**-------*|-------|*-------**-------*|
*---------------------------------------------|-------|------------------*
                                              *-------*
Actual View:

*------------------------------------------------------------------------*
|*-------*                                                               |
||       |                                                               |
|| FOCUS |                                                               |
||       |                                                               |
||       |                                                               |
||-------|                                                               |
*|-------|---------------------------------------------------------------*
 *-------*                                                               
 *-------*
 |       | 
 |       | 
 |       | 
 |       | 
 |-------| 
 |-------| 
 *-------*

有什么建议吗？我们在所有 div 都绝对定位的路线下走得太远，无法更改第一个指出的 CSS 属性。

编辑:

http://jsfiddle.net/w3v8394r/1/

Position:相对定位解决了主要问题(感谢 Aaron)，但不是全部: - 元素不水平堆叠。

Answer 1

将 float: left; 添加到 .container。

编辑:

I like it. What about centering?

代替 float: left 使用 display: inline-block 并将 text-align: center 添加到 #items

并将vertical-align: top;添加到.container

http://jsfiddle.net/w3v8394r/3/