csså®ä½æºå¶
- æ®éæµ
- å®ä½
- ç¸å¯¹å®ä½ï¼absolute
- ç»å¯¹å®ä½ï¼relative
- åºå®å®ä½ï¼fixed
- æµ®å¨
æ®éæµ
- ç®ä»ï¼ é»è®¤æ¯æ®éæµï¼æ®éæµä¸å
ç´ æ¡çä½ç½®ç±å
ç´ å¨HTMLä¸çä½ç½®å³å®ãå级å
ç´ ä»ä¸å°ä¸ä¾æ¬¡æåï¼æ¡ä¹é´çåç´è·ç¦»ç±æ¡çåç´margin计ç®å¾å°ï¼è¡å
å
ç´ å¨ä¸è¡ä¸æ°´å¹³å¸ç½®
å®ä½
æ©å±ï¼ä½¿ç¨äºposition/æµ®å¨ä¹åï¼topãleftç设置ææææ
ç¸å¯¹å®ä½
- ç®ä»ï¼ç¸å¯¹ââââæçæ¯ç¸å¯¹äºæ®éæµçæ¶åçä½ç½®ï¼å¯ä»¥ç¸å¯¹äºæ®éæµæ¶åçä½ç½®è¿è¡ä¸ä¸å·¦å³ç移å¨
- 注æï¼ä½¿ç¨ç¸å¯¹å®ä½çå
ç´ ä¸ç®¡å®æ¯å¦è¿è¡ç§»å¨ï¼å
ç´ ä»è¦å æ®å®åæ¥çä½ç½®ã移å¨å
ç´ ä¼å¯¼è´å®è¦çå
¶ä»çæ¡ã
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.myDiv1{
background-color: red;
width: 200px;
height: 200px;
}
.myDiv2{
position: relative;
background-color: blue;
width: 200px;
height: 200px;
top: 100px;
left: 100px;
}
.myDiv3{
background-color: burlywood;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="myDiv1">ä½ çæ</div>
<div class="myDiv2">ä½ çæ</div>
<div class="myDiv3">ä½ çæ</div>
</body>
</html>
ç»å¯¹å®ä½
- ç®ä»ï¼ç¸å¯¹äºæè¿çç¶ç±»å
ç´ ,å¦æ没æââââé£ä¹å°±æ¯ç¸å¯¹äºbodyæ ç¾,ç»å¯¹å®ä½æ¯ç¸å¯¹äºç¶äº²æ¥è¿è¡ä¸ä¸å·¦å³ç移å¨
- 注æï¼ç»å¯¹å®ä½çæ¡è±ç¦»æ®éæµï¼æ以å®å¯ä»¥è¦ç页é¢ä¸çå
¶ä»å
ç´ ï¼å¯ä»¥éè¿è®¾ç½®ï¼º-Iindexå±æ§æ¥æ§å¶è¿äºæ¡çå æ¾æ¬¡åº
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fatherDiv{
position: relative;
width: 200px;
height: 200px;
background-color: brown
}
.sonDiv{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
background-color: blue
}
body{
background-color: blanchedalmond
}
</style>
</head>
<body>
<div class="fatherDiv">
<div class="sonDiv">
</div>
</div>
</body>
</html>
- 说æï¼ä»å¾ä¸å¯ä»¥çå°å
¶å®æ¯ç¸å¯¹äºç¶å
ç´ ç(0,0)ä½ç½®ï¼èä¸æ¯è±æ çââå°±æ¯ç¸å½äºä¸åå¨äºãããä¸ä¼åå ç¨ä½ç½®èæ¯å¨å«äººä¹ä¸(è°å¨ä¸é¢æ¯å¯ä»¥è®¾ç½®çZ-Iindexå±æ§)
åºå®å®ä½
- 说æï¼åºå®äºæµè§å¨ä¸ï¼ä¸ä¼éçå±å¹ç移å¨è移å¨ââæ¯å¦è¯´å±å¹æä¸æï¼ä½æ¯å°±ç®ä¸æäºï¼ä»å¨é£ä¸ªä½ç½®ä¸ä¼æ¹åã
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.fixedDiv{
position: fixed;
width: 200px;
height: 200px;
background-color: black
}
body{
background-color: blanchedalmond;
height: 3000px;
}
</style>
</head>
<body>
<div class="fixedDiv"></div>
</body>
</html>
æµ®å¨
- 说æï¼æµ®å¨çæ¡å¯ä»¥å¨å·¦å³ç§»å¨ï¼ç´å°å®çå¤è¾¹æ¡è¾¹ç¼ç¢°å°å
å«æ¡æå¦ä¸ä¸ªæµ®å¨æ¡çè¾¹ç¼ãæµ®å¨çæ¡è±ç¦»æ®éæµââç¸å½äºä¸åå æä½ç½®ã
-