HTML/CSS/CSS Attributes and Javascript Style Properties/left

Материал из Web эксперт
Перейти к: навигация, поиск

"left" Example

   <source lang="html4strict">
   

<html> <body>

<img id="myImg" src="http://www.wbex.ru/style/logo.png" width="100" height=100" style="position:relative">

<input type="button" value="Set left property to 100" onclick="myImg.style.left=100"> <input type="button" value="Set left property to 200" onclick="myImg.style.left=200"> <input type="button" value="Restore image position" onclick="myImg.style.left=0"> </body> </html>


     </source>
   
  


Top offset and left offset

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

                     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

   <head>
       <title>z-index</title>
       <style rel="stylesheet" type="text/css">

body {

   background: lightyellow;

} div {

   position: absolute;
   width: 100px;
   height: 100px;
   border: 1px solid rgb(200, 200, 200);
   z-index: auto;

} div#one {

   background: pink;
   top: 10px;
   left: 10px;

} div#two {

   background: lightblue;
   top: 20px;
   left: 20px;

} div#three {

   background: yellowgreen;
   top: 30px;
   left: 30px;

} div#four {

   background: orange;
   top: 40px;
   left: 40px;

}

       </style>
   </head>
   <body>
   </body>

</html>

</source>