CSS 如何使用 z-index 获取 div 以在悬停时覆盖另一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22793462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a div with z-index to overlay another div on hover
提问by caniball
I have a container divwith several smaller div:s inside, all of them with float:left;. If I hover one of the smaller div:s the heightand widthshould be increased and it should overlay the other div:s without moving them.
我有一个容器div，div里面有几个较小的:s，它们都带有float:left;. 如果我将一个较小的div:s悬停，height并且width应该增加并且它应该覆盖另一个div:s 而不移动它们。
HTML:
HTML：
<div id="boxcontainer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
CSS:
CSS：
.box {
float:left;
position: relative;
width:150px;
height:150px;
margin:5px;
background-color: yellow;
}
#boxcontainer {
position: relative;
width:500px;
height:auto;
}
.box:hover {
z-index:100;
width:300px;
height:auto;
}
How can I achieve this?
我怎样才能做到这一点？
回答by DreamTeK
z-index only works on positioned elements(position:absolute, position:relative, or position:fixed).
z-index 仅适用于定位元素(position:absolute, position:relative, or position:fixed)。
Instead of float left try position absolute.
而不是浮动左尝试位置绝对。
I have added a container around each box and positioned each element absolutely within it. This way you can add as many boxes as you wish and keep the same class.
我在每个盒子周围添加了一个容器，并将每个元素绝对放置在其中。通过这种方式，您可以根据需要添加任意数量的框并保持相同的类。
EXAMPLE
例子
HTML
HTML
<div id="boxcontainer">
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
<div class="box">
<div class="Inside"></div>
</div>
</div>
CSS
CSS
#boxcontainer{
position: relative;
width:500px;
height:500px;
}
.box{
position:relative;
float:left;
width:150px;
height:150px;
margin:5px;
}
.Inside{
background:green;
position:absolute;
top:0;
left:0;
width:150px;
height:150px;
transition:all 0.5s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
z-index:100;
width:250px;
height:250px;
background:#666666;
}
回答by Nate
Live Demo: http://jsfiddle.net/hKL4f/1/
现场演示：http: //jsfiddle.net/hKL4f/1/
I think the easiest way to do what you want would be to use a CSS transform.
我认为做你想做的最简单的方法是使用 CSS 转换。
.box:hover {
transform: scale(2, 2);
}
That way you alter the dimensions of the element on hover without affecting any of the other elements in the document flow around it.
这样您就可以在悬停时更改元素的尺寸，而不会影响围绕它的文档流中的任何其他元素。
If you want the boxes to expand in a different way (ie, to the right and bottom rather than in all directions) you can set a transform-originproperty (default is 50% 50%).
如果您希望框以不同的方式展开（即向右和向底部而不是向所有方向展开），您可以设置变换原点属性（默认为 50% 50%）。
回答by Drake
Try this...works somewhat
试试这个……有点用
.box{
float:left;
postion: fixed;
width:150px;
height:150px ;
margin:5px;
background-color: yellow;
}
#boxcontainer{
postion: fixed;
width:500px;
height:auto;
}
.box:hover{
z-index:1;
width:260px;
height:160px;
position:absolute;
}
回答by Vidit Varshney
I had the Same problem in my project when i hover , the box changes its width and height but it efffects the other boxes as well so to solve this problem best way is to use transformproperty as below
当我悬停时，我的项目中遇到了同样的问题，盒子改变了它的宽度和高度，但它也会影响其他盒子，所以解决这个问题最好的方法是使用transform如下属性
.box:hover {
transform: scale(1.2 , 1.2); // This increses the dimmensions of the box and overlay
to others boxes without disturbing others
}
