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

Question

在下面的代码段中，通常将child div放在绝对位置，直到它:hover ed为止。 该标记背后的原因是为了在无法使用<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;
}

注意同级选择器。 如果图像放置在收音机之外的外部区域中，则无法说“如果选中相应的收音机，则显示图像” 。

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

因为image元素在未悬停时是唯一可见的元素，所以为了保持悬停时同级的自然位置，您需要将该元素保持在绝对位置之外。

换句话说，将其他所有东西包装在一个容器中，并使其成为绝对值。

<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使用显式的top和left （或右侧或底部），否则在旧的非标准浏览器中可能会有所不同。 这意味着您需要让您的.container相对。 （作为.child绝对定位的参考点）

.container {
    position:relative;
}

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

Answer 2

我建议同时向右浮动按钮和文本输入（您必须交换顺序，有关原因，请参见浮动：正确的文档）：

<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演示

的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;
}