How to preserve sibling element position when one sibling is absolutely positioned?
- by Casey
In the snippet below, the child div is normally positioned until it is :hovered , when it becomes absolutely positioned. The reasoning behind this markup is to simulate a popup style in a limited environment where I can't use a <select> (among other limitations).
When child is hovered, the sibling elements jump around, which is expected, as the contents of the block have changed.
But how can I preserve their positioning? That is, what CSS can I add to prevent the siblings from jumping around when child is hovered.
Javascript is also not allowed, so please no answers using 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;
}
Here's a fiddle: http://jsfiddle.net/cpctZ/1/
