我正在尝试使用绝对定位来定位包含蓝色方块的 div。出于某种原因,我无法将它带到我想要它去的地方。
JSFIDDLE:http: //jsfiddle.net/qkF3Z/
我的代码:
#share-area-arrow {
position: absolute;
height: 10px;
width: 10px;
background-color: blue;
}
它应该看起来如何:
我可能做错了什么?
我正在尝试使用绝对定位来定位包含蓝色方块的 div。出于某种原因,我无法将它带到我想要它去的地方。
JSFIDDLE:http: //jsfiddle.net/qkF3Z/
我的代码:
#share-area-arrow {
position: absolute;
height: 10px;
width: 10px;
background-color: blue;
}
它应该看起来如何:
我可能做错了什么?
有 2 件。绝对位置将使用最近的相对定位父级的坐标系。所以你需要添加相对于父级的位置:
#share-something {
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
height: auto;
width: 540px;
overflow: auto;
position:relative;
}
然后定位箭头:
#share-area-arrow {
position: absolute;
top:10px;
left:70px;
height: 10px;
width: 10px;
background-color: blue;
}
可以在这里找到不同职位类型之间的一个非常好的解释:http: //alistapart.com/article/css-positioning-101。要点是当您希望元素在 dom 中保持其空间,但出现在另一个位置时,请使用相对位置。如果要完全移动元素,请使用绝对位置。
这会产生预期的结果:
更新了 CSS - 我使用relative
了定位。
#share-area-arrow {
position: relative;
height: 10px;
width: 10px;
background-color: blue;
top: 20px;
left: 70px;
}
或者,如果您觉得需要absolute
定位,请使用:
#share-area-arrow {
position:absolute;
top: 30px;
left: 192px;
}
jsFiddle 这里- 当前上下文中的相同结果