首页 > 代码库 > CSS 中定位的使用
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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。