如何在另一个div上放置覆盖div与网格相似的设计？
如何在另一个div上放置覆盖div与网格相似的设计？
提问于 2013-11-16 11:38:25
我试着制作一个像设计一样的网格，我想在每个div上显示一个覆盖。
覆盖div有两个按钮，应该放在中间。
我尝试了下面的代码，我相信逻辑是正确的，但按钮和叠加的位置没有放置在图像div的中心。
图像无覆盖
在覆盖上的悬停
<ul>
<li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
<div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
</li>
<li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
<div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
</li>
<li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
<div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
</li>
<li>
<div class="image"><img src="http://i.stack.imgur.com/rOVDt.jpg"/></div>
<div class="overlay"><div class="bt1"></div><div class="bt2"></div></div>
</li>
</ul>CSS
.image{
width:100px;
height:100px;
}
.overlay{
width:100px;
height:100px;
display:none;
}
ul { list-style: none; width: 100%; }
ul li { display:inline-block; width:150px;}
.image:hover +.overlay {
display:block;
background-color:black;
top:0;
opacity:0.75;
}
.bt1 {
background-color:orange;
position:absolute;
width:50px;
height:50px;
margin:0 0 0 5%;
}
.bt2 {
background-color:green;
position:absolute;
width:50px;
height:50px;
margin:0 5% 0 0;
}JSfiddle。图像大小是可变的，所以固定的填充中心按钮可能不会有帮助这里，我认为。有人能帮我定位覆盖层吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-11-16 12:09:49
改变了一些东西的位置，也给了一个高度的李元素，因为img更大.
http://jsfiddle.net/4CqNK/8/
.image{
width:100px;
height:100px;
}
.overlay{
width:100%;
height:100%;
display:none;
position:absolute;
top:0px;
left:0px;
}
.overlay div {
position:relative;
display:inline-block;
top:50%;
margin:-50% 5px 0 0;
}
ul { list-style: none; width: 100%; }
ul li { position:relative;display:inline-block; width:150px;height:150px;}
li:hover .overlay {
display:block;
background-color:black;
opacity:0.75;
}
.bt1 {
background-color:orange;
width:50px;
height:50px;
}
.bt2 {
background-color:green;
width:50px;
height:50px;
}Stack Overflow用户
发布于 2013-11-16 12:00:42
首先，您必须确保您的.image和.overlay类显示在同一个位置。因此，在这里，您应该在position:relative中添加一个ul li，并向两个类中添加一个absolute:position。
一旦有了它，放置元素就更容易了：(小提琴)
.image{
position:absolute;
left:0;
top:0;
width:150px;
height:150px;
}
.overlay{
position:absolute;
left:0;
top:0;
width:150px;
height:150px;
display:none;
}
ul { list-style: none; width: 100%; }
ul li {
display:inline-block;
width:160px;
position:relative;
}
li:hover .overlay {
display:block;
background-color:black;
opacity:0.75;
}
.bt1 {
background-color:orange;
position:absolute;
width:50px;
height:50px;
left:5%; <-- you may have to play with those values if you want to place them somewhere else
top:30%; <-- same as above
}
.bt2 {
background-color:green;
position:absolute;
width:50px;
height:50px;
right:5%;
top:30%;
}Stack Overflow用户
发布于 2013-11-16 16:20:59
您可以将下面的CSS代码用于图像：
position:absolute;
z-index:-1;z-index属性指定元素的堆栈顺序。
堆栈顺序更大的元素总是在堆栈顺序较低的元素前面。
注:Z-索引只适用于定位元素(位置:绝对，位置:相对，或位置:固定)。
我的解决方案：http://jsfiddle.net/xAkJG/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20017952
复制相关文章
相似问题
腾讯云开发者
