We can position an element using the top, bottom, left and right properties. These properties can be used only after position property is set first. A position element's computed position property is relative, absolute, fixed or sticky.
Let's have a look at following CSS positioning:
- CSS Static Positioning
- CSS Fixed Positioning
- CSS Relative Positioning
- CSS Absolute Positioning
CSS Static Positioning
This is a by default position for HTML elements. It always positions an element according to the normal flow of the page. It is not affected by the top, bottom, left and right properties.
CSS Fixed Positioning
The fixed positioning property helps to put the text fixed on the browser. This fixed test is positioned relative to the browser window, and doesn't move even you scroll the window.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
.class_fixed{
position:fixed;
top:50px;
right:50px;
color:red;
}
</style>
</head>
<body>
<p>HTML stands for HyperText Markup Language. It is a markup language used for creating web pages and web applications. HTML uses a set of tags and attributes to define the structure and content of a web page.</p>
<p>Tags are enclosed in angle brackets (< >).</p>
<p>The head tag is used to define the head section of an HTML document. The head section contains information about the document that is not visible to the user, such as metadata, scripts, and stylesheets.</p>
<p>The link tag is used to link an HTML document to an external resource, such as a stylesheet or icon.</p>
<p>The hr tag is a self-closing tag that is used to insert a horizontal line on a web page.</p>
<p>The img tag is used to insert images into an HTML document. The img tag is a self-closing tag, which means that it does not require a closing tag.</p>
<p class="class_fixed">The br tag is a self-closing tag that is used to insert a line break in an HTML document. </p>
</body>
</html>
CSS Relative Positioning
The relative positioning property is used to set the element relative to its normal position.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
h2.pos_left {
position: relative;
left: -30px;
}
h2.pos_right {
position: relative;
left: 30px;
}
</style>
</head>
<body>
<h2>This is a heading with no position</h2>
<h2 class="pos_left">This heading is positioned left according to its normal position</h2>
<h2 class="pos_right">This heading is positioned right according to its normal position</h2>
</body>
</html>
Output
CSS Absolute Positioning
The absolute positioning is used to position an element relative to the first parent element that has a position other than static.
With the absolute positioning, you can place an element anywhere on a page.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorials</title>
<style>
div.relative {
position: relative;
max-width: 400px;
height: 200px;
border: 3px solid #6266f1;
padding: 15px;
}
div.absolute {
position: absolute;
bottom: 10px;
right: 40px;
width: 200px;
height: 100px;
border: 3px solid #c6d2fe;
padding: 15px;
}
</style>
</head>
<body>
<div class="relative">
Position: relative
<div class="absolute">Position: absolute</div>
</div>
</body>
</html>
Output
No comments:
Post a Comment