position : value;
|
<!DOCTYPE html>
<html lang="en"> <style> #p1 { position: static; border: 1px solid blue; width: 300px; height: 100px; } #c1 { position: absolute; border: 1px solid red; top: 70px; right: 15px; } #p2 { position: relative; border: 1px solid blue; width: 300px; height: 100px; } #c2 { position: absolute; border: 1px solid red; top: 70px; right: 15px; } #p3 { position: absolute; border: 1px solid blue; width: 300px; height: 100px; top: 750px; right: 15px; } #c3 { position: absolute; border: 1px solid red; top: 70px; right: 15px; } #p4 { position: fixed; border: 1px solid blue; background-color: rgba(165, 32, 32, 0.5); width: 300px; height: 100px; bottom: 0; left: 0; right: 0; } #c4 { position: absolute; border: 1px solid red; top: 70px; right: 15px; } </style> <head> <link rel="stylesheet" href="sample.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia|Audiowide|Trirong"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <title>Document</title> </head> <body> <html> <head> <title>HTML Tables</title> </head> <body> <h1>this is sample heading</h1> <div id="p1">This is p1 <div id="c1">this is c1</div> </div> <h2>heading</h2> <div id="p2">this is p2. <div id="c2">this is c2</div> </div> <h2>heading</h2> <div id="p3">this is p3 <div id="c3">this is c3</div> </div> <h2>heading</h2> <div id="p4">this is p4 <div id="c4">this is c4</div> </div> </body> </html> </body> </html> |