Невозможно установить абсолютную позицию для моего div, используя jQuery - PullRequest
3 голосов
/ 18 декабря 2011

@ Purmou

Привет! Пожалуйста, рассмотрите следующий html5 файл.Div все еще располагаются в 0,0, и границы также не появляются.Я пробовал различные изменения в прилагаемом документе, но, похоже, он не работает.

Буду очень признателен за вашу помощь Пурму и всем остальным, читающим эту заметкуС уважением, sbguy

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Absolute Positioning Test</title>
<style type="text/css">
html, body {
    position:absolute; 
    top:0;
    left:0;
    margin:0px;
    padding:0px 0px 0px 0px;
    height:100%;
    width:100%;
}
div {
    margin:0px;
    padding:0px 0px 0px 0px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/JavaScript">
var A_height = 100;
var A_width = 100;
var A_top = 20;
var A_left = 20;
var B_height = 100;
var B_width = 100;
var B_top = 200;
var B_left = 200;
jQuery("#A").css({ 
    "position": "absolute",
    "width": A_width + "px",
    "height": A_height + "px",
    "top": A_top + "px",
    "left": A_left + "px",
    "border": "1px solid black",
    });
jQuery("#B").css({
    "position": "absolute",
    "width": B_width + "px",
    "height": B_height + "px",
    "top": B_top + "px",
    "left": B_left + "px",
    "border": "1px solid black",
    });
</script>
</head>
<body>
<div id="A">
<p>HELLO A</p>
</div>
<div id="B">
<p>HELLO B</p>
</div>
</body>
</html>

1 Ответ

9 голосов
/ 18 декабря 2011

Попробуйте использовать это:

jQuery("#div1A").css({
    "position":"absolute", 
    "top": $("#div1A").offset().top + "px",
    "left": $("#div1A").offset().left + "px",
});

РЕДАКТИРОВАТЬ: Вы, очевидно, хотели установить переменные div1A_top и div1A_left в качестве значений top и left CSS:

jQuery("#div1A").css({
    "position":"absolute", 
    "top": div1A_top + "px",
    "left": div1A_left + "px",
});
...