Question

I have a text box and a hidden div which will be shown as a popup. I want when user click on the textbox, the hidden div popup will be displayed at the textbox’s position. So, I use the code:

var p = $("#listCats");
var position = p.offset();
$('#category').css({"left" : position.left, "top" : position.top});

listCats: the id of the textbox

category: the id of the hidden div, and it is also the css

#category {
        width: 508px;
        min-height: 135px;
        padding: 0.4em;
        position: absolute;
        border: 2px solid rgb(124, 113, 113);
        background: #fff
}

However, the hidden div popup does not show as I expected, rather:

Was I doing something wrong?

Edited:
The complete hidded div as follows:

<div id="category" style="display:none;">
        <s:iterator value="categoryMapList">
            <div class="cat_label_title parentCat" id="<s:property value="key.id" />">
                <s:property value="key.name" />
                <div class="subCat">
                    <s:iterator value="value" var="category">
                        <label >
                            <a  href="#" class="cat_label_item catItem" name="catItem:<s:property value="key.name" />, <s:property value="#category.name" />"
                                id="catItem:<s:property value="#category.id" />">
                                <s:property value="#category.name" />
                            </a>
                        </label>
                    </s:iterator>
                </div>
            </div>
        </s:iterator>
    </div>

Answer 1

You might want to check to see if the category container is absolutely positioned inside another div that has relative positioning.

This would mean the top, left is relative to the parent.

So by taking the page offset of the parent, and then setting that to the child, you would push it away from the parent instead of under.

Check this out as well: https://stackoverflow.com/a/3202038/1060487