CODEWITHSUNDEEP
htmlcss
user2495207
user2495207

Reputation: 861

Overlapping span's on hover without displacement

Well this is for texts, here is the code I was trying:

<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>
<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>

What i'm looking for is to avoid the displacement of the others span, seems like z-index property doesn't work. Something like this: enter image description here

Thanks for any help.

Upvotes: 0

Views: 351

Answers (2)

abluejelly
abluejelly

Reputation: 1306

The issue is you are increasing the size of the span's box, but not telling other elements to ignore that. relative only lets you relatively position- it doesn't remove from flow, and z-index only does something if an element would be displayed on top of or behind you- it doesn't effect x/y positioning. However, we will need to set it higher than our younger sibling(s) in order to have our outlining effect display in front of them.

A negative margin with the same width as the border can solve this problem.

Another, more DRY solution would be to use outline or box-shadow instead of border, as both outline and box-shadow are drawn outside of the box.

Note that outline outlines around children as well, so if you abs-pos any children to where they're outside of the parent, the box will be drawn around them as well. However, it is most semantically correct for what you're trying to do.

#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;
}
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>

Upvotes: 1

Przemysław Melnarowicz
Przemysław Melnarowicz

Reputation: 1057

You have relative element, so it react with other elements. If you add 20px border, then other elements are reacting to this by displacement. You can place negative margin which will 'pull back' this 20px you've added with border.

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

Upvotes: 1

Related Questions