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
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
div.static {
position: static;
border: 3px solid #73AD21;
}
//Another example
div.relative {
position: relative;
left: 30px;
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);
}
}