CSS跨度位置：绝对不起作用

Question

my span position:absolute; and transition is not working. What can I do in this section?

When you click on the menu and clicked on changing the location of the span menu is slipping under. But standing on the right side of the <span></span> and does not show any change. This is demo Page: JsFiddle HTML

<div class="tb-tabs org">
    <a class="tab1">Status</a>
    <a class="tab2">Photo</a>
    <a class="tab3">Video</a>
    <a class="tab4">Link</a>
    <span></span>
  </div>

CSS

.tb-tabs span {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;  
  border-bottom: 9px solid #d8dbdf;
  position: absolute;
  transition: transform .0s;
  transform: translate( -220px, 41px);
}

.tb-tabs span:after {
  display: block;
  content: '';
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;  
  border-bottom: 8px solid #f4f4f4;
  position: absolute;
  transform: translate(-7px, 1px); 
}

.tb-tabs a.current {
  color: hsl(0, 0%, 0%);
  transition: all .8s;
}

.tb-tabs.org {
  border-color:#d8dbdf;
}

.tb-tabs.org span {
  border-bottom-color:#d8dbdf;
}

.tb-content > div {
  width: 275px;
  height: 350px;
}

.tb-content > div p {
  padding: 10px;
}

span.arr-tab1 {
  transform: translate( -305px, 41px);  

}

span.arr-tab2 {
  transform: translate( -220px, 41px);  
}

span.arr-tab3 {
  transform: translate( -135px, 41px);  
}

span.arr-tab4 {
  transform: translate( -50px, 41px);  
}

Answer 1

Try setting the parent .tb-tabs.org to position:relative; . When absolutely positioning, if you want the span to be absolutely positioned within the bounds of it's parent, you must set that parent to position:relative; .

Answer 2

Click your css Toggle Complied View your codepen.io project ( This means that the eye icon.) , after the css section will give you documentation available. You only need to do this code to copy and paste it into your style.css file. and right now your <span></span> is working fine.