CSS 中定位的使用

position
　　relative 设置区块基准点为左上角(相对定位以区块的左上角为基准点仍然会暂居原来的位置)　

　　　　a、不影响元素本身的特性；
　　　　b、不使元素脱离文档流；
　　　　c、如果没有定位偏移量，对元素本身没有任何影响；　　　　

　　　　定位元素位置控制
　　　　　　top/right/bottom/left 定位元素偏移量。

　　absolute 设置网页的为基准点左上角（绝对定位以网页的左上角为基准点不会暂居原来的位置）　　

　　　　a、使元素完全脱离文档流；
　　　　b、使内嵌元素支持宽高；
　　　　c、块属性标签内容撑开宽度（在没有设置宽的情况下）；

　　static 无设置

如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；
相对定位一般都是配合绝对定位元素使用；

<title>无标题文档</title>
<style>
div{font-size:20px;}

body{border:1px solid black;}

.box1{width:300px;height:300px; background:red; position:relative;}
.box2{width:200px;height:200px;background:blue; /* position:relative;*/}/*同级的也可以相对定位，你懂的*/
.box3{width:100px;height:100px;background:green; position:absolute;right:0;bottom:0;}
</style>
</head>
<body>
<div class="box1">
    <div class="box2">
    <div class="box3"></div>
  </div>
</div>
</body>

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>

<style>
.parent{ border:2px solid red; padding:10px; width:300px; height:300px; margin:90px auto; position:relative;}
.parent a{width:100px; height:100px; line-height:100px; text-align:center; background:red; position:absolute;color:#fff; font-weight:bold; text-decoration:none;}
.link1{top:10px;left:10px;}
.link2{top:10px;right:10px;}
a.link3{top:110px;right:110px; background:blue;color:yellow;}/*这个选择符表示，拥有link3这个类的a标签，这样可以使这个标签覆盖掉上面被设置的有重复的样式*/
.link4{left:10px;bottom:10px;}
.link5{right:10px;bottom:10px;}


</style>
</head>
<body>
<div class="parent">
    <a href="#" class="link1">链接1</a>
    <a href="#" class="link2">链接2</a>
  <a href="#" class="link3">链接3</a>
  <a href="#" class="link4">链接4</a>
  <a href="#" class="link5">链接5</a>
</div>
</body>

position:fixed；固定定位

与绝对定位的特性基本一致，差别是始终相对整个文档进行定位；对其他元素没有任何的影响

问题：IE6不支持固定定位；

<style>
body{height:1500px;}

.box1{width:500px;height:100px; background:red; position:absolute;right:0;bottom:0;}
.box2{width:300px;height:300px;background:blue;position:fixed;right:0;bottom:0;}/*给内联元素加上定位后可以支持设置宽高*/
</style>
</head>
<body>
<div class="box1">position:absolute;绝对定位</div>
<div style="width:200px; height:200px;border:5px solid black; position:relative; left:50px; top:80px;">
    <span class="box2">position:fixed； 固定定位</span><!--即使是div的子元素，给他加了固定定位后，完全脱离文档流，对其他元素无任何影响-->
</div>
</body>

定位问题

<style>
#box1{width:500px; height:300px; background:blue; overflow:hidden;}/*当子元素的高度高于父元素的时候，没加overflow，子元素会溢出，*/
#box2{width:300px; height:500px; background:yellow; position:relative;}
/* 
ie6 下父级的overflow:hidden;是包不住子级的相对定位的
 */
</style>
</head>

<body>
<div id="box1">
    <div id="box2"></div>
</div>
</body>

<style>
#box1{width:303px; height:303px;border:1px solid black; position:relative;}
#box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}
/* 
在 IE6 下定位元素的父级宽高都为奇数那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。
 */
</style>
</head>
<body>
<div id="box1">
    <div id="box2"></div>
</div>
</body>

posted @ 2014-07-02 10:52 胡椒粉hjf 阅读(300) 评论(0) 编辑收藏举报

刷新页面返回顶部

たLOME

CSS 中定位的使用

公告