Question

在下面的代码段中，child div通常会定位到:hover，当它变为绝对定位时。此标记背后的原因是在有限的环境中模拟弹出样式，我无法使用<select>（以及其他限制）。

当child悬停时，兄弟元素会跳跃，这是预期的，因为块的内容已经改变。

但我怎样才能保持他们的定位呢？也就是说，我可以添加什么CSS来防止兄弟姐妹在child被徘徊时跳来跳去。

Javascript也是不允许的，所以请不要使用JS的答案。

跳到下面的编辑

HTML：

<div class="container">
    <div class="child">
        <span class="d4"></span>
        <label><input type="radio" name="radio" value="1"/>One</label>
        <label><input type="radio" name="radio" value="2"/>Two</label>
    </div>
    <input type="text" name="sibling"/>
    <button name="sibling2">Button</button>
</div>

CSS：

.container, .child, button {
    display:inline-block;
}

.child {
    vertical-align: middle;
    width: 35px;
    height: 35px;
}

.child:hover {
    background: gray;
    position:absolute;
    width: 100px;
    height: auto;
}

.child:hover > .d4 {
    display: none;
}

.child label {
    display:none;
}

.child:hover label {
    display: inline-block;
}

.d4 {
    background-position: -411px -1px;
    width: 35px;
    height: 35px;
    background-image: url("https://i.imgur.com/zkgyBOi.png");
    background-repeat: no-repeat;
    color: transparent;
    display: inline-block;
}

这是一个小提琴：http://jsfiddle.net/cpctZ/1/

修改

新小提琴：http://jsfiddle.net/cpctZ/48/

我过分简化了原来的问题。事实上，child中有多个子代表各种下拉选项。

图像和收音机必须是兄弟元素，以便根据所选的收音机有条件地显示正确的图像：

.child:not(:hover) input[name="radio"][value="1"]:checked ~ .d4 {
    display: block;
}
.child:not(:hover) input[name="radio"][value="2"]:checked ~ .d8 {
    display: block;
}

注意兄弟选择器。如果图像放在外部div而不是无线电中，则无法说“如果检查了相应的无线电，则显示图像”。

更新了HTML

<div class="container">
    <div class="child">
        <input type="radio" name="radio" value="1" checked="true" />
        <label>d4</label>
        <input type="radio" name="radio" value="2" />
        <label>d8</label>
        <div class="d4"></div>
        <div class="d8"></div>
    </div>
    <input type="text" name="sibling" />
    <button name="sibling2">Button</button>
</div>

所以问题仍然存在：\ 当孩子徘徊时如何防止那些兄弟元素移动，同时保持上述特征？

Answer 1

因为图像元素是未悬停时唯一可见的元素，为了在悬停时保持兄弟的自然定位，您需要将该元素保持在绝对位置之外。

换句话说，将其他所有东西都包装在一个容器中，然后改为绝对。

<div class="child">
    <span class="d4"></span>
    <div class="child-inner">
        <label><input type="radio" name="radio" value="1"/>One</label>
        <label><input type="radio" name="radio" value="2"/>Two</label>
    </div>
</div>

并为了隐藏.d4，请将其设为不透明度= 0.01。

.child {
    vertical-align: middle;
    width: 35px;
    height: 35px;
}

.child:hover .child-inner {
    background: gray;
    position:absolute;
    width: 100px;
    height: auto;
    top:0; left:0;
}

.child:hover > .d4 {
    opacity: 0.01;
}

使用绝对位置时，使用显式top和left（或右侧或底部）也总是一个好主意，否则在旧的非标准浏览器中可能会有不同的处理方式。这意味着您需要获得.container亲戚。（作为.child）绝对定位的参考点

.container {
    position:relative;
}

演示：http://jsfiddle.net/cpctZ/15/

Answer 2

我建议将按钮和文本输入都浮动（你必须交换订单，请参阅float：right文档了解原因）：

<button class="fr" name="sibling2">Button</button>
<input class="fr" type="text" name="sibling"/>

使用CSS：

.container .fr{
float: right;
}

并使用CSS浮动孩子：

.child {
vertical-align: middle;
width: 35px;
height: 35px;
float:left;
}

这符合我的想法： JSFiddle：http://jsfiddle.net/cpctZ/32/

编辑：要使其在firefox上运行，请使用

为容器指定宽度

.container{
width 250px;
}

更新小提琴：http://jsfiddle.net/cpctZ/54/

Answer 3

实际上，我认为你根本不需要使用定位。这可以通过display:none

实现

JSfiddle Demo

<强> CSS

.container, .child, button {
    display:inline-block;
}

.child {
    vertical-align: middle;
    width: 100px; 
    height: 35px;
}

.child:hover {
    background: gray;

    height: auto;
}

.child:hover > .d4 {
    display: none;
}
.child label {
    display: none;
}

.child:hover label {
    display: inline-block;
}

.d4 {
    background-position: -411px -1px;
    width: 35px;
    height: 35px;
    background-image: url("https://i.imgur.com/zkgyBOi.png");
    background-repeat: no-repeat;
    color: transparent;
    display: inline-block;
}

当一个兄弟姐妹绝对定位时，如何保留兄弟元素的位置？

修改

3 个答案: