您的位置：首页 > Web前端 > CSS

CSS 定位 position

2017-11-02 19:26 183 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航