In CSS, position: relative and position: absolute are two properties that define how an element should be positioned on a web page.
When an element is positioned relative, it is positioned relative to its normal position in the document flow. This means that other elements will still take up space around it, even if it is moved. The top, bottom, left, and right properties can be used to move the element in any direction from its normal position.
On the other hand, when an element is positioned absolute, it is taken out of the normal document flow and positioned relative to its closest positioned ancestor (or the <body> element if there is no positioned ancestor). This means that it will not take up any space in the document flow and other elements will be positioned as if it wasn't there. The top, bottom, left, and right properties can also be used to position the element relative to its positioned ancestor.
In summary, position: relative moves the element relative to its normal position in the document flow, while position: absolute takes the element out of the document flow and positions it relative to its closest positioned ancestor.
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<body>
<div class="first">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</body>
</html>
Our simple html code.
.first{
width: 400px;
border: 1px solid red;
position: absolute;
top: 10px;
left: 25px;
}
.second {
max-width: 400px;
margin: auto;
border: 1px solid red;
background: yellow;
position: relative;
bottom: 0px;
left: 0px;
}
This CSS code defines two classes .first and .second with different positioning properties:
.firstis positioned absolutely withtop: 10pxandleft: 25px. This means that its position is relative to the first positioned ancestor element, or to the initial containing block if there is no such ancestor. The element is taken out of the normal flow of the document and the surrounding content will be adjusted to fill in the gap left by the element..secondis positioned relatively withbottom: 0pxandleft: 0px. This means that its position is relative to its normal position in the document flow. The element is still part of the normal flow of the document, but its position can be adjusted relative to where it would normally appear.
By applying these classes to elements in an HTML document, you can control their position on the page in different ways. In the HTML code we provide, the .first class is applied to a div element, while the .second class is applied to a nested div element. This will cause the two elements to be positioned differently relative to each other.
Here's an example HTML code with internal CSS that demonstrates the difference between absolute and relative positioning:
<!DOCTYPE html>
<html>
<head>
<title>Positioning Example</title>
<style>
.first {
position: relative;
border: 1px solid red;
height: 200px;
width: 200px;
margin: 50px;
background-color: #f0f0f0;
}
.second {
position: absolute;
top: 50px;
left: 50px;
border: 1px solid blue;
height: 100px;
width: 100px;
background-color: #c0c0c0;
}
</style>
</head>
<body>
<div class="first">
<p>This is the parent element with relative position.</p>
<div class="second">
<p>This is the child element with absolute position.</p>
</div>
</div>
</body>
</html>
In this example, the .first element is positioned relatively, meaning that its child element .second will be positioned absolutely in relation to its boundaries. The .second element is then positioned at top: 50px; and left: 50px; from the top-left corner of its parent .first element.
No comments:
Post a Comment