Web Technology - Old Questions
3. How positioning of HTML elements can be done using CSS? Create a HTML page with a div with some content and two paragraph with some contents having id p1 and p2. Write external CSS for the div tag having fixed position with border style solid and width 2 px. the p1 should have relative position. The font type of p1 should be Arial and color should be red. The p2 have absolute position with top 0px and left 200px.[2+8]
The position property specifies the type of positioning method used for an HTML element. There are four different position values:
- Static Positioning: Static positioning is the default that every element gets. Static positioned elements are not affected by the top, bottom, left, and right properties.
- Fixed Positioning: An element with
position: fixed;is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element. - Relative Positioning: Relative positioning changes the position of the HTML element relative to where it normally appears. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
- Absolute Positioning: An element with position: absolute is positioned at the specified coordinates relative to our screen top-left corner.
Second Part:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Collegenote</title>
</head>
<body>
<div class="cn">
Collegenote is an educational platform to help IT students in their educational career.
</div>
<p id="p1">
Collegenote is currently focused on creating contents to help students in their study.
</p>
<p id="p2">
Students of B.Sc. CSIT, BIT and BCA can get updated notes, old questions and solutions for the easy learning.
</p>
</body>
</html>
style.css
.cn{
position:fixed;
border: 2px solid black;
}
#p1{
position: relative;
font-family: Arial;
color: red;
}
#p2{
position:absolute;
top: 0px;
left: 200px;
}