Question

我无法获得边框的顶部以显示另一个div后面的div。它目前被切断，但我想让它显示在技能标签后面。这可能吗？谢谢!!

#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;    
line-height: 38px;
background-color: #ffe8eb;
float: left;

}

#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}

Answer 1

我想让它显示在技能标签后面。这可能吗？

z-index属性指定元素在DOM中出现的顺序（同一层次结构中最低元素总是出现在顶部）。当元素重叠时，z-index值确定哪一个覆盖另一个。 z-index仅影响位置值不是默认值的元素。要创建您想要的效果，您需要向z-index添加较小的#skills值，如下所示：

#skills{
  width: 75px;
  height: 40px;
  font-weight: 300;
  text-align: center;
  font-size: 1em;
  position: relative;
  margin-top: 20px;
  margin-left: 20px;
  font-family: 'Source Sans Pro', sans-serif;    
  line-height: 38px;
  background-color: #ffe8eb;
  float: left;
  z-index: -2;
}

或者将z-index的{{1}}值从-1更改为1.这是一个小提琴示例供您查看。 http://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select

Answer 2

你的#skills元素没有设置z-index属性，这意味着它将默认为auto，它会检查父元素的z-index来计算它，我的建议是设置两个元素索引以确保：

#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;    
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: 0;
}

#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}

Div边界在另一个div后面切断了

2 个答案: