Menu
How do I apply absolute positioning to a jQuery element my current jQuery script is
<head>
...
<script type="text/javascript" src="slidemenu.js"></script>
<script type="text/javascript">
$('#sm').css({
position: 'absolute',
top: '10px',
left: '10px'
});
</script>
</head>
<body onload="slideMenu.build('sm',286,10,10,1)">
<ul id="sm" class="sm">
<li><img src=".gif" alt="" /></li>
<li><img src=".gif" alt="" /></li>
<li><img src=".gif" alt="" /></li>
<li><img src=".gif" alt="" /></li>
<li><img src=".gif" alt="" /></li>
<li><img src=".gif" alt="" /></li>
</ul>
...
And my current css is:
#sm {
margin:0;
padding:0;
}
#sm {
list-style:none;
top:240px;
left:300px;
width:604px;
height:286px;
display:block;
overflow:hidden;z-index: 200;
position:absolute;
}
#sm li {
float:left;
display:inline;
overflow:hidden;z-index: 200;
position:relative;
}
459
An absolutely positioned element is an element whose computed position value is absolute or fixed . The top , right , bottom , and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor relative to which the element is positioned.)
jQuery position() MethodThe position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.
Difference between offset() and position() Method:The jQuery UI offset() is relative to the document. The jQuery UI position() is relative to the parent element. When you want to position a new element on top of another one which is already existing, its better to use the jQuery offset() method.
An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.
Use the .css functionality:
$('#yourelement').css({
position: 'absolute',
top: '10px',
left: '10px'
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
