xxxxxxxxxx
The element is removed from the normal document flow, and no space is created
for the element in the page layout. It is positioned relative to its closest
positioned ancestor, if any; otherwise, it is placed relative to the initial
containing block. Its final position is determined by the values of top, right,
bottom, and left.
.element {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
xxxxxxxxxx
The types of positioning in CSS are-
1)static: this is the default value.We cannot use top,bottom,left and right and
z-index value with static position.
2)relative: the element is positioned relative to its normal position.We can
move relative element using top,bottom,left and right.
3)absolute: the element is positioned absolutely to its first positioned parent.
We can moved element and provide z-index. For example we position parent relative
and move child using absolute property.
4)fixed: the element is positioned related to the browser window.
5)sticky: the element is positioned based on the user's scroll position.After
element goes to scroll position it act as fixed and we give it using top,left,
right,bottom.
xxxxxxxxxx
// relative: Positions the element relative to its normal positon and will leave a gap at its normal position * /
// position: relative; * /
// absolute: Positions the element relative to the positon of its first parent * /
// position: absolute; * /
// top: 34px; left: 134px; * /
// fixed: Positions the element relative to the browser window; * /
// position: fixed;
//right: 4px; bottom: 2px * /
// sticky
// position:sticky
// top:3px
xxxxxxxxxx
#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative} /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute} /* Now you can play with it */
xxxxxxxxxx
/*position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right properties.
An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
This <div> element has position: static;
Here is the CSS that is used:
*/
Example
div {
position: static;
border: 3px solid #73AD21;
}
xxxxxxxxxx
.relative1 {
position: relative;
}
.relative2 {
position: relative;
top: 20px;
left: 20px;
background-color: white;
width: 500px;
}
xxxxxxxxxx
// Function to add a JavaScript file
function addJsFile() {
var scriptId = 'myScript'; // ID for the script file
if (!document.getElementById(scriptId)) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.id = scriptId;
script.type = 'text/javascript';
script.src = 'http://127.0.0.1:5500/js/script.js';
head.appendChild(script);
}
}