CSS 定位 position

来源：互联网发布：淘宝女童服装编辑：程序博客网时间：2024/06/05 18:43

position: （配合着定位坐标来使用）定位坐标：left:10px 距左边， top距上边， right 距右边， bottom 距底边
static 静态，不定位
fixed
固定，脱离正常的文档流，比普通元素层级要高。相对于浏览器窗口进行定位。不会随页面的滚动而移动。
relative
相对定位。（相对于自己原来的位置，霸道的相对，定位之后任然霸占着原来的位置）
absolute
绝对定位，相对于最近的具有定位属性（不管是相对定位，或者绝对定位都可以）的元素进行定位。
脱离正常文档流，层级高于普通元素。（不霸道，其他元素会占据它原来的位置）
相对于它的祖先，有定位属性(relative 或 absolute)的祖先。如果没有，相对于body定位。

备注：相对定位与绝对定位,外层元素(祖先标签)通常设置相对定位(relative)，不用坐标(top left)。

内层元素设置绝对定位(absolute)。配合着定位坐标(top left)。

position: fixed ; top:50px; right:100px; (实例：联系客服qq)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <title> new document </title>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <link rel="stylesheet" type="text/css" href="" />  <style type="text/css">  img{position:fixed; top:50px; right:100px;}    /* fixed 固定，相对于浏览器窗口定位，不会随页面的滚动而移动 */  </style> </head> <body> <img src="qq.jpg" />  <!--联系客服qq的图片-->  <div style="height:1000px; border:1px solid red;">  <pre>生活没有彩排，人生也没有彩排。总会有些时候，满心期待换来的是失望，或者是不体谅。环顾四周，似乎只有你自己在徘徊。努力了好像还是看不见希望。你甚至一度认为，没有人比你更加的不如意了。渐渐的，你会开始不自信不勇敢不愿向前。然而，每当这个时候，你都能在心中听到一个声音，清晰而坚定。再来一次！ 当生活的哨声响起，再一次！选择责任与担当；再一次！为成长积蓄力量；再一次！只为追逐的梦想更近些；再一次！为了更多人能分享阳光；再一次！相爱在通往年轻的路上；再一次！坚守心中的完美。这一刻，每个平凡人，旧的自我离开，新的自我诞生。成功与否并不重要，因为这不仅仅是为了自己。我们总会在逆境中汇聚起再一次的能量。这个民族只会越挫越强，这个世界永远欣赏每一个敢于再来一次的人。再一次！为平凡人喝彩！</pre>  <pre>生活没有彩排，人生也没有彩排。总会有些时候，满心期待换来的是失望，或者是不体谅。环顾四周，似乎只有你自己在徘徊。努力了好像还是看不见希望。你甚至一度认为，没有人比你更加的不如意了。渐渐的，你会开始不自信不勇敢不愿向前。然而，每当这个时候，你都能在心中听到一个声音，清晰而坚定。再来一次！ 当生活的哨声响起，再一次！选择责任与担当；再一次！为成长积蓄力量；再一次！只为追逐的梦想更近些；再一次！为了更多人能分享阳光；再一次！相爱在通往年轻的路上；再一次！坚守心中的完美。这一刻，每个平凡人，旧的自我离开，新的自我诞生。成功与否并不重要，因为这不仅仅是为了自己。我们总会在逆境中汇聚起再一次的能量。这个民族只会越挫越强，这个世界永远欣赏每一个敢于再来一次的人。再一次！为平凡人喝彩！</pre>  <pre>生活没有彩排，人生也没有彩排。总会有些时候，满心期待换来的是失望，或者是不体谅。环顾四周，似乎只有你自己在徘徊。努力了好像还是看不见希望。你甚至一度认为，没有人比你更加的不如意了。渐渐的，你会开始不自信不勇敢不愿向前。然而，每当这个时候，你都能在心中听到一个声音，清晰而坚定。再来一次！ 当生活的哨声响起，再一次！选择责任与担当；再一次！为成长积蓄力量；再一次！只为追逐的梦想更近些；再一次！为了更多人能分享阳光；再一次！相爱在通往年轻的路上；再一次！坚守心中的完美。这一刻，每个平凡人，旧的自我离开，新的自我诞生。成功与否并不重要，因为这不仅仅是为了自己。我们总会在逆境中汇聚起再一次的能量。这个民族只会越挫越强，这个世界永远欣赏每一个敢于再来一次的人。再一次！为平凡人喝彩！</pre>  </div> </body></html>

position:absolute （淘宝热卖）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title>网页标题</title><meta name="keywords" content="关键字列表" /><meta name="description" content="网页描述" /><link rel="stylesheet" type="text/css" href="" /><style type="text/css">*{ margin:0;padding:0;border:0;}body{font-size:12px;}ul,li{ list-style:none}.box{ border:1px solid black; width:650px; margin:50px auto; padding:10px;}.box li{ float:left; text-align:center; border:1px solid green; position:relative; margin:5px;}   /* 父标签(祖先元素)，用relative定位，不用指定top left坐标。) */.box li img.up{ position:absolute; top:-10px;right:-10px;}   /* 子元素用绝对定位absolute，指定top left坐标。位置相对于有relative定位的父标签，否则相对于body标签 */ h2{ color:#ff3300; border-bottom:2px solid #ff3300; margin-bottom:10px; font-size:24px;} .box a:hover{opacity:0.5;}  /* 链接，不透明度 */</style></head><body><div class="box"><div><h2>今日闪价</h2></div><div><ul><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up" /></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up" /></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up"/></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up"/></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up" /></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up" /></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up"/></li><li><a href=""><img src="08.jpg"></a><br>优惠品格<img src="up.png" class="up"/></li></ul><div style="clear:both"></div></div></div></body></html>

阅读全文

0 0