CSS Positioning Elements.pdf
DrAbiramiAnandhan
807 views
11 slides
May 16, 2022
Slide 1 of 11
1
2
3
4
5
6
7
8
9
10
11
About This Presentation
CSS Positioning Elements
Slide Content
CSS Positioning Elements
Dr.T.Abirami
Associate Professor
Department of IT
Kongu Engineering College
Perundurai
Dr.T.Abirami
Associate Professor
Department of IT
Kongu Engineering College
Perundurai
CSS Positioning Elements
•The positioning of an element can be done using the top, right,
bottom, and left properties.
•These specify the distance of an HTML element from the edge of the
viewport.
•To set the position by using the following properties, we have to
declare the positioning method.
•Fixed
•Static
•Relative
•Absolute
•Sticky
CSS helps to position your HTML
element.
The position property specifies the type of positioning method
used for an element (static, relative, absolute, fixed, or sticky).
•The positioning of an element can be done using the top, right,
bottom, and left properties.
•These specify the distance of an HTML element from the edge of the
viewport.
•To set the position by using the following properties, we have to
declare the positioning method.
•Fixed
•Static
•Relative
•Absolute
•Sticky
CSS helps to position your HTML
element.
The position property specifies the type of positioning method
used for an element (static, relative, absolute, fixed, or sticky).
• 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.
•The element is positioned relative to the browser window
Fixed Positioning
•The top, right, bottom, and left properties are used to
position the element.
•The element is positioned relative to the browser window
Fixed Positioning
Fixed Positioning
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:40px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
<html>
<head>
</head>
<body>
<div style = "position:fixed; left:80px; top:40px; background-color:yellow;">
This div has fixed positioning.
</div>
</body>
</html>
Absolute Positioning
•An element with position: absolute is positioned at the specified
coordinates relative to your screen top-left corner.
•You can use two values top and left along with the position property
to move an HTML element anywhere in the HTML document.
•The element is positioned relative to its first positioned (not static)
ancestor element
•An element with position: absolute is positioned at the specified
coordinates relative to your screen top-left corner.
•You can use two values top and left along with the position property
to move an HTML element anywhere in the HTML document.
•The element is positioned relative to its first positioned (not static)
ancestor element
<html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-
color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
<head>
</head>
<body>
<div style = "position:absolute; left:80px; top:20px; background-
color:yellow;">
This div has absolute positioning.
</div>
</body>
</html>
Relative Positioning
•The element is positioned relative to its normal position, so "left:20px"
adds 20 pixels to the element's LEFT position
•An element with position: relative; is positioned relative to its normal
position.
•Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position.
•Other content will not be adjusted to fit into any gap left by the
element.
•The element is positioned relative to its normal position, so "left:20px"
adds 20 pixels to the element's LEFT position
•An element with position: relative; is positioned relative to its normal
position.
•Setting the top, right, bottom, and left properties of a relatively-
positioned element will cause it to be adjusted away from its normal
position.
•Other content will not be adjusted to fit into any gap left by the
element.
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
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;
•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;
<html>
<head>
<style>
div.static { position: static; border: 3px solid #73AD21; }
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
<head>
<style>
div.static { position: static; border: 3px solid #73AD21; }
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position</p>
<div class="static">
This div element has position: static;
</div>
</body>
</html>
position: sticky;
•It is positioned based on the
user's scroll position.
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky
positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>Scroll back up to remove the stickyness.</p>
</div>
</body>
</html>
•It is positioned based on the
user's scroll position.
<html>
<head>
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky
positioning works.</p>
<div class="sticky">I am sticky!</div>
<div style="padding-bottom:2000px">
<p>Scroll back up to remove the stickyness.</p>
</div>
</body>
</html>
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 807
- Slides 11
- Age 1294 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
28 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views