絕對定位一個兄弟姐妹時如何保留兄弟姐妹元素的位置？

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