Reputation: 169
I am trying to use absolute positioning to position a div containing a blue square. For some reason, I am unable to get it where i want it to go.
JSFIDDLE: http://jsfiddle.net/qkF3Z/
My Code:
#share-area-arrow {
position: absolute;
height: 10px;
width: 10px;
background-color: blue;
}
How it should look:
What could I be doing wrong?
Upvotes: 2
Views: 59
Reputation: 241208
This creates the expected result:
Updated CSS - I used relative
positioning instead.
#share-area-arrow {
position: relative;
height: 10px;
width: 10px;
background-color: blue;
top: 20px;
left: 70px;
}
Alternatively, if you feel you need absolute
positioning, use:
#share-area-arrow {
position:absolute;
top: 30px;
left: 192px;
}
jsFiddle here - same result in current context
Upvotes: 1
Reputation: 10572
There are 2 pieces. Position absolute will use the coordinate system of the closest relatively positioned parent. So you need to add position relative to the parent:
#share-something {
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
height: auto;
width: 540px;
overflow: auto;
position:relative;
}
and then position the arrow:
#share-area-arrow {
position: absolute;
top:10px;
left:70px;
height: 10px;
width: 10px;
background-color: blue;
}
A really great explanation between the different position types can be found here: http://alistapart.com/article/css-positioning-101. The gist is when you want the element to maintain it's space within the dom, but appear in another location, use position relative. If you want to completely move the element use position absolute.
Upvotes: 1