Home > Developer > Web Develop
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>CSS positioning (static, relative, fixed, absolute layout) Small ads case</title> <Linkrel= "stylesheet"href= "Tzy.css"type= "Text/css"></Head><Body><DivID= "Position1"></Div><Script> for(varI=0; I<Ten; I++) {document.write (i+"<br/>"); }</Script><DivID= "Position2"></Div><Script> for(varI=Ten; I< -; I++) {document.write (i+"<br/>"); }</Script><DivID= "Position3"></Div><Script> for(varI= -; I< -; I++) {document.write (i+"<br/>"); }</Script><BR/><BR/><BR/><BR/><BR/><DivID= "Position4"></Div><Script> for(varI= -; I>0; I--) {document.write (i+"<br/>"); }</Script><DivID= "Position5"></Div><DivID= "Position6"></Div></Body></HTML>
#position1{width:100px;Height:100px;Background-color:mediumturquoise;position:relative;/*Relative layout (no change)*/ Left:2px;/*Offset left*/}#position2{width:100px;Height:100px;Background-color:mediumturquoise;position:Absolute;/*Absolute Layout (no change)*/ Left:10px;/*Offset left*/}#position3{width:100px;Height:100px;Background-color:Forestgreen;position:fixed;/*Fixed layout (no change)*/Z-index:2;/*larger values are closer to the user*/}#position4{width:100px;Height:100px;Background-color:mediumturquoise;position:Static;/*Static layout (no change)*/ Right:100px;/*Offset Right 100px*/ Left:20px;/*Offset Right*/ /*offset Useless*/}#position5{width:100px;Height:100px;Background-color:mediumturquoise;position:relative;/*Relative layout (no change)*/Top:20px;/*offset up to 100px*/ Left:20px;/*Offset left*/Z-index:2;/*larger values are closer to the user*/}#position6{width:100px;Height:100px;Background-color:Coral;position:relative;/*Relative layout (no change)*/ Left:10px;/*Offset left*/Z-index:1;/*larger values are closer to the user*/}/*Static cannot be controlled the other can be*/
HTML Learning notes CSS positioning (static, relative, fixed, absolute layout) Offset Case section 12th (original) Reference use table
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
