CODEWITHSUNDEEP
htmlcss
user2320500
user2320500

Reputation: 169

Using Absolute Positioning

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: Correct Positioning

What could I be doing wrong?

Upvotes: 2

Views: 59

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 241208

This creates the expected result:

jsFiddle here

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

scrappedcola
scrappedcola

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;
}

http://jsfiddle.net/qkF3Z/6/

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

Related Questions