It’s been a long time since I updated my blog. It’s been 23 days since I started to work. I’ve started to work on the right track, and I’ll regularly update my recent knowledge and work.
Today, let me talk about the problem of the arrow style of the tab bar.
Add a square div to rotate in nav-btn, use the following code to achieve
.rotatebox{
height:42px;
width:43px;
position: absolute;
top: 8px;
left: 138px;
transform: rotate(45deg);
z-index: 20;
background-color: rgb(182, 182, 182);
}
.active .rotatebox{
background: rgb(66, 163, 71);
}Set the nav-btn and z-index in the active state to 30 (effective, the following figure can cover the nav-btn with index 20)
Among them, set the z-index of nav-btn in normal state to 20, and set the z-index of rotate to 50 (greater than 30 of active) (not effective, as shown below, inactive rotate cannot cover active nav-btn)
Later, I discovered that when setting the z-index, the entire nav-btn set directly under the parent tag is the z-index when it is active. The code is as follows, but in fact, this will affect the status of the navbtn subtag rotate, leading to the setting Does not take effect.
.nav-title-wrap{
display: inline-block;
margin-left: 25%;
.active{
//z-index：30
background: rgb(66, 163, 71);
}
}Solution:
In fact, in the entire code, you only need to set the z-index in the normal state of rotate to 20! (Whether it is active or not, it will always be displayed on the top layer) The result is displayed normally, but there is a problem, that is, if the text inside wants to be displayed in the center, it must be set to a z-index greater than 20 to prevent it from being covered by a small square !
In addition, there is a saying on the Internet: It is recommended to use a background image with an arrow, directly a background image + margin-left + z-index to get it, and save a series of troubles of rotate. If there are background image resources, it is recommended to use. The link is as follows:
https://www.jb51.net/css/546811.html
In addition, it is worth noting that when using z-index, you must set position, absolute, relative, and fixed.
The z-index is an attribute that renders based on the parent element. If the parent element is at a low level, it is useless for the child element to work hard!
For more details about z-index, see https://www.cnblogs.com/teamobaby/p/3840226.html