html - 当一个兄弟绝对定位时如何保留兄弟元素位置？

Question

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

当 child悬停时，兄弟元素跳来跳去，这是预期的，因为 block 的内容已更改。

但是我怎样才能保持他们的定位呢？也就是说，我可以添加什么CSS来防止 sibling 在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;
}

这是一个 fiddle :http://jsfiddle.net/cpctZ/1/

---

编辑

新 fiddle :http://jsfiddle.net/cpctZ/48/

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

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

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

注意兄弟选择器。如果图像放置在 radio 之外的 div 中，则无法说“如果选中相应的 radio 则显示图像”。

更新的 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

实际上，我认为您实际上根本不需要使用定位。这一切都可以通过 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;
}