Question

我的跨度位置：绝对;过渡不起作用。我在这部分可以做些什么？

当您单击菜单并单击更改跨区菜单的位置时，滑动下方。但站在<span></span>的右侧并没有显示任何变化。这是演示页面：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

尝试将父.tb-tabs.org设置为position:relative;。绝对定位时，如果希望跨度绝对位于其父级的范围内，则必须将该父级设置为position:relative;。

Answer 2

点击你的css Toggle Complied查看你的codepen.io项目（这意味着眼睛图标。），在css部分之后将为你提供文档。您只需要执行此代码即可将其复制并粘贴到style.css文件中。现在你的<span></span>工作正常。

css span position：绝对不行

2 个答案: