[英]How to preserve sibling element position when one sibling is absolutely positioned?
In the snippet below, the child
div is normally positioned until it is :hover
ed , when it becomes absolutely positioned. 在下面的代码段中,通常将
child
div放在绝对位置,直到它:hover
ed为止。 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). 该标记背后的原因是为了在无法使用
<select>
的有限环境中模拟弹出样式(还有其他限制)。
When child
is hovered, the sibling elements jump around, which is expected, as the contents of the block have changed. 当将
child
悬停时,由于块的内容已更改,所以同级元素会跳来跳去。
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. 也就是说,我可以添加什么CSS来防止在悬停
child
时兄弟姐妹跳来跳去。
Javascript is also not allowed, so please no answers using JS. 也不允许使用Javascript,因此请不要使用JS回答。
SKIP TO THE EDIT BELOW 跳到下面的编辑
HTML: 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: 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/ 这是一个小提琴: http : //jsfiddle.net/cpctZ/1/
New fiddle: http://jsfiddle.net/cpctZ/48/ 新提琴: http : //jsfiddle.net/cpctZ/48/
I simplified my original question too much. 我简化了我最初的问题。 In fact there are multiple children in
child
representing the various dropdown options. 事实上,有多个孩子在
child
代表不同的下拉选项。
The image and the radios must be sibling elements, in order to conditionally display the correct image based on the selected 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;
}
Note the sibling selector. 注意同级选择器。 If the images are placed in an outer div than the radios, there is no way to say "show the image if its corresponding radio is checked" .
如果图像放置在收音机之外的外部区域中,则无法说“如果选中相应的收音机,则显示图像” 。
Updated HTML 更新的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>
So the question remains :\\ How to keep those sibling elements from moving when the child is hovered, while maintaining the feature described above? 因此问题仍然存在:\\ 如何在孩子悬停时不让那些兄弟元素移动,同时保持上述功能?
Because the image element, is the only visible element when not hovered, in order to preserve natural positioning of sibling when hovered, you need to keep that element out of position absolute. 因为image元素在未悬停时是唯一可见的元素,所以为了保持悬停时同级的自然位置,您需要将该元素保持在绝对位置之外。
in other word, wrap everything else in a container and make that one absolute instead. 换句话说,将其他所有东西包装在一个容器中,并使其成为绝对值。
<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>
and in order to hide the .d4
, make it opacity=0.01. 并为了隐藏
.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;
}
It's also always a good idea to use explicit top
and left
(or right, or bottom) when using position absolute, as otherwise maybe treated differently in old non-standard browsers. 在使用绝对位置时,
top
使用显式的top
和left
(或右侧或底部),否则在旧的非标准浏览器中可能会有所不同。 which means you need to get your .container
relative. 这意味着您需要让您的
.container
相对。 (to be reference point for absolute positioning of .child
) (作为
.child
绝对定位的参考点)
.container {
position:relative;
}
demo: http://jsfiddle.net/cpctZ/15/ 演示: http : //jsfiddle.net/cpctZ/15/
I would suggest floating both the button and text input right (you have to swap the order, see the float: right documentation for why): 我建议同时向右浮动按钮和文本输入(您必须交换顺序,有关原因,请参见浮动:正确的文档):
<button class="fr" name="sibling2">Button</button>
<input class="fr" type="text" name="sibling"/>
with the CSS: 与CSS:
.container .fr{
float: right;
}
and float the child left with CSS: 并用CSS浮动孩子:
.child {
vertical-align: middle;
width: 35px;
height: 35px;
float:left;
}
This works as I think you want it: JSFiddle: http://jsfiddle.net/cpctZ/32/ 这可以按我认为的方式工作:JSFiddle: http : //jsfiddle.net/cpctZ/32/
Edit: To get it working on firefox, give the container a width using 编辑:要使其在Firefox上正常工作,请使用
.container{
width 250px;
}
updated fiddle: http://jsfiddle.net/cpctZ/54/ 更新的提琴: http : //jsfiddle.net/cpctZ/54/
Actually, I think you don't actually need to use positioning at all. 实际上,我认为您实际上根本不需要使用定位。 This can all be achieved with
display:none
全部可以通过
display:none
来实现
CSS 的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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.