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

Question

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

当child 悬停时，兄弟元素会跳来跳去，这是意料之中的，因为块的内容发生了变化。

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

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

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

Answer 2

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

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

<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，使其 opacity=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 3

我建议将按钮和文本输入都向右浮动（您必须交换顺序，请参阅 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/