Position Property CSS
Absolute Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<html> <head> <style> div.relative { position: relative; width: 500px; height: 200px; border: 5px solid brown; } div.absolute { position: absolute; top: 80px; right: 0; width: 300px; height: 100px; border: 3px solid red; } </style> </head> <body> <h2>Position: absolute;</h2> <p><b>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</b></p> <div class="relative"> <img src="logo.jpg"/> <div class="absolute"> <img src="logo.jpg"/> </div> </div> </body> </html> |
Relative Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html> <head> <style> div.r { position: relative; left: 60px; border: 5px solid green; } h1, p { text-align: center; color: purple; } </style> </head> <body> <h1>Position: relative</h1> <p><b>An element with position: relative; is positioned relative to its normal position:</b></p> <div class="r"> This div element has Position: relative; </div> <br> <img src="logo.jpg"/> </body> </html> |
Fixed Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<html> <head> <style> div.fixed { position: fixed; bottom: 50px; right: 50px; width: 300px; border: 3px solid green; } </style> </head> <body> <h2>Position: fixed</h2> <p><b>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:</b></p> <div class="fixed"> <img src="logo.jpg"/> </div> </body> </html> |
Static Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<html> <head> <style> div.static { position: static;
width: 250px; border: 5px solid blue; } h1, h2 { text-align: center; color: blue; } </style> </head> <body> <h1>Welocme To CSS</h1> <h2>Psoition: static</h2> <div class="static"> This div element has position: static; </div> <br> <img src="logo.jpg"/> </body> </html> |
Sticky Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: lightpink; border: 4px solid red; } </style> </head> <body> <h1>Position: sticky</h1> <p><b>"Try to scroll" inside this frame to understand how sticky positioning works"...</b></p> <div class="sticky">Sticky</div> <div style="padding-bottom:3000px"> <p>Scroll back up to remove the stickyness.</p> <p>Some text to enable scrolling.. For Example: The Central Superior Services (denoted as CSS; or Bureaucracy) is a permanent elite bureaucratic authority, and the civil service that is responsible for running the civilian bureaucratic operations and government secretariats and directorates of the Cabinet of Pakistan...</p> <img src="logo.jpg"/> </div> </body> </html> |
Bottom – Right in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <style> .container { position: relative; } .bottomright { position: absolute; bottom: 8px; right: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Bottom Right</h2> <p><b>Add some text to an image in the bottom right corner:</b></
p> <div class="container"> <img src="logo.jpg" alt="logo" width="1500" height="300"> <div class="bottomright">T4-Tutorials</div> </div> </body> </html> |
Bottom Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <style> .container { position: relative; } .bottomleft { position: absolute; bottom: 8px; left: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.2; } </style> </head> <body> <h2>Bottom Left</h2> <p><b>Add some text to an image in the bottom left corner:</b></p> <div class="container"> <img src="logo.jpg" alt="logo" width="1000" height="300"> <div class="bottomleft">T4-Tutorials</div> </div> </body> </html> |
Center Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<html> <head> <style> .container { position: relative; } .center { position: absolute; left: 0; top: 50%; width: 100%; text-align: center; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.4; } </style> </head> <body> <h2>Welcome To CSS</h2> <p><b>Center text in image:</b></p> <div class="container"> <img src="logo.jpg" alt="logo" width="1000" height="300"> <div class="center">T4-Tutorials</div> </div> </body> </html> |
Image Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <style> .container { position: relative; } .topleft { position: absolute; top: 8px; left: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.5; } </style> </head> <body> <h2>Image in the Top left corner:</h2> <p><b>How to position text over an image:</b></p> <div class="container"> <img src="logo.jpg" alt="logo" width="2000" height="400"> <div class="topleft">T4-Tutorials</div> </div> </body> </html> |
Overlapping Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <style> img { position: absolute; left: 0px; top: 0px; z-index: -1; } </style> </head> <body> <h1>Overlapping</h1> <img src="logo.jpg" width="400" height="100"> <br><br> <p><b>Because the image has a z-index of -1, it will be placed behind the text..</b></p> </body> </html> |
Right Position in HTML and CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <style> .container { position: relative; } .topright { position: absolute; top: 8px; right: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Top-Right</h2> <p>How to position text over an image:</p> <div class="container"> <img src="logo.jpg" alt="Cinque Terre" width="1000" height="300"> <div class="topright">T4-tutorials</div> </div> </body> </html> |