CSS 中定位的使用
position
relative 设置区块基准点为左上角(相对定位 以区块的左上角为基准点
仍然会暂居原来的位置)
absolute 设置网页的为基准点左上角(绝对定位 以网页的左上角为基准点
不会暂居原来的位置)
static 无设置
left auto 以基准点定位在左边 像素/百分比 定位在左边
top
auto 以基准点定位在上边 像素/百分比 定位在上边
right auto 以基准点定位在右边 像素/百分比 定位在右边
bottom
auto 以基准点定位在下边 像素/百分比 定位在下边
z-index auto 自动调整高度 数字 数字越大越往上层
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS 中定位的使用</title> 6 <style type="text/css"> 7 div{ 8 font-size:36px; 9 font-family:Arial, Helvetica, sans-serif; 10 } 11 .div1{ 12 color:#F00; 13 position:absolute; 14 top:20px; 15 left:20px; 16 z-index:3; 17 } 18 .div2{ 19 color:#0F0; 20 position:absolute; 21 top:22px; 22 left:22px; 23 z-index:2; 24 } 25 .div3{ 26 color:#00F; 27 position:absolute; 28 top:24px; 29 left:24px; 30 z-index:1; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="div1">名人名言,你得先是名人了那才是名言,别人的屁都是名屁!你能比吗?</div> 36 <div class="div2">名人名言,你得先是名人了那才是名言,别人的屁都是名屁!你能比吗?</div> 37 <div class="div3">名人名言,你得先是名人了那才是名言,别人的屁都是名屁!你能比吗?</div> 38 39 </body> 40 </html>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。