Question

这是文本，这是我正在尝试的代码：

＆＃13;

<style>
#items { 
     width:400px;
     padding: 10px;
}

.esp {
	float: left;
	background-color: yellow;
    position:relative;
    z-index:0;
}  
.le {
	float: left;
    position:relative;
    z-index:0;

}  

.esp:hover{
	background-color: blue;
    z-index:1;
    /*width: 50px;*/
    border: 20px solid;
}
</style>

＆＃13;

<html>

<div id="items">

<span class="le">fist</span>
<span class="le">fist</span>
<span class="le">fist</span>
<span class="le">fist</span>
<span class="le">fist</span>
<span class="esp">second</span>
<span class="le">third</span>
<span class="le">fist</span>
<span class="esp">second</span>
<span class="le">third</span>
<span class="le">fist</span>
<span class="esp">second</span>
<span class="le">third</span>
<span class="le">third</span>
<span class="le">third</span>
<span class="le">third</span>

</div>


</html>

＆＃13;

我正在寻找的是避免其他跨度的移位，似乎 z-index 属性不起作用。像这样的东西：

感谢您的帮助。

Answer 1

你有相对元素，所以它与其他元素反应。如果添加20px边框，则其他元素会通过置换对此做出反应。您可以设置负边距，这将会回撤＆＃39;这个20px你添加了边框。

.esp:hover{
    background-color: blue;
    z-index:1;
    border: 20px solid;
    margin: -20px;
}

Answer 2

问题是你正在增加span框的大小，但没有告诉其他元素忽略它。 relative只允许您相对定位 - 它不会从流中移除，而z-index只会在您上方或后方显示元素时执行某些操作 - 它不起作用x / y定位。但是，为了让我们的轮廓效果显示在他们面前，我们需要将它设置得比我们的弟弟更高。

与边框宽度相同的负边距可以解决此问题。

另一个更干的解决方案是使用outline或box-shadow代替border，因为outline和box-shadow都是在框外绘制的。

请注意，outline也围绕着孩子的轮廓，所以如果你将任何孩子放在他们不在父母之外的地方，那么他们也会围绕这些孩子。但是，对于您尝试做的事情来说，它在语义上最正确。

＆＃13;

#items { 
     width:400px;
     padding: 10px;
}

.esp {
	float: left;
	background-color: yellow;
    position:relative;
}  
.le {
	float: left;
    position:relative;
    z-index:0;

}  

/*border-neg-margins*/
/*dis: neg margins*/
.bnm:hover{
    background-color: blue;
    z-index:1; 
    border: 20px solid #556;
    margin: -20px;
}

/*outline*/
/*adv: no negative margins, most semantically correct*/
/*dis: will expand to outline any children that exceed the parent's size*/
.ol:hover{
    background-color: blue;
    z-index:1; 
    outline: 20px solid #556;
}

/*box-shadow*/
/*adv: no neg margins, only outlines the box*/
/*dis: not really semantically correct*/
.bs:hover{
    background-color: blue;
    z-index:1; 
    box-shadow: 0 0 0 20px #556;
}

＆＃13;

The first one uses Border and Negative Margins<br />
The second uses Outline<br />
The third uses Box-Shadow<br />
Color used is #556 so any sibling text appearing on top of it would be visible<br />
<span class="le">fist</span>
<span class="le">fist</span>
<span class="le">fist</span>
<span class="le">fist</span>
<span class="le">fist</span>
<span class="esp bnm">second</span>
<span class="le">third</span>
<span class="le">fist</span>
<span class="esp ol">second</span>
<span class="le">third</span>
<span class="le">fist</span>
<span class="esp bs">second</span>
<span class="le">third</span>
<span class="le">third</span>
<span class="le">third</span>
<span class="le">third</span>

＆＃13;

在没有位移的情况下悬停时重叠跨度

2 个答案: