注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

Position 属性的运用  

2014-02-27 21:26:51|  分类: HTML+CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
position:属性规定元素的定位类型,所有的元素都可以用position来进行定位。position定位之后的对象将具有块属性。
语法:
position:static | relative | absolute | fixed | inherit 
定位相关的部分属性:
z-index:nubmer | auto 
left: length | auto
right: length | auto
top:length | auto
bottom:length | auto
我们在实际定位中往往会在定位后面跟加left | top | right | bottom 来对于他们进行精确地定位控制。
static 该值是position 的默认值, 可以省略不写(static会忽略任何  left top right bottom)
relative 相对定位, 对象不可层叠,但将依据left top right bottom 等属性在正常文档流中偏移的位子,其主要作用就是作为绝对定位的父级属性来用, 一般不单独使用。
PS:relative 即相对于原来元素所在位置进行偏移。
absolute 绝对定位,对象从文档流中拖出,使用left right top bottom 等属性进行绝对定位。二其层叠通过z-index属性定义。
fixed 可定位于相对浏览器窗口的指定坐标。此元素的位置可通过left right top bottom 属性来规定。不论窗口滚动与否镁元素都会留在那个位置。工作于IE7(strict)。此标签兼容性不好,可以用absolute 来取代,实现同样的效果。
在position 中relative和absolute 一般是配合使用,如果父级标签是指了relative属性 ,那么absolute 则会以其父标签左上角坐标为起始,诺没有 则会以body左上角坐标为起始。

z-index 设置元素的堆叠顺序,值可以去负值。拥有最高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面 ,仅能在定位元素上奏效。
z-index只能针对同级的标签有效,也就是说子标签的z-index值对父标签是无效的,因为两者的级别不同,z-index无法比较。
让我们来体会一下 position的特别之处。

<!DOCTYPE HTML>
<html>
<head>
<title>zxy3622008 </title>
<style>
.da div
{
width:50px;
height:40px;

}
.da{

margin:50px auto;
width:500px;
height:400px;
background:blue;
}
.a{

background:red;

}
.b{


background:yellow;

}
.c{

background:green;

}
</style>

</head>

<body>
<div class="da">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
</body>
</html>


Position 属性的运用 - zxy3622008 - zxy3622008的博客
接下来我们对三个div设置绝对定位

<!DOCTYPE HTML ">
<html>
<head>
<title> zxy3622008</title>
<style>
.da div
{
width:50px;
height:40px;
position:absolute;
}
.da{

margin:50px auto;
width:500px;
height:400px;
background:blue;
}
.a{

background:red;

}
.b{


background:yellow;

}
.c{

background:green;

}
</style>

</head>

<body>
<div class="da">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
</body>
</html>



 
Position 属性的运用 - zxy3622008 - zxy3622008的博客
 我们可以发现 前两个div消失了 我们在给三个盒子设置下具体位置

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<style>
.da div
{
width:50px;
height:40px;
position:absolute;
}
.da{

margin:50px auto;
width:500px;
height:400px;
background:blue;
}
.a{
top:10px;
left:10px;
background:red;

}
.b{
top:20px;
left:20px;
background:yellow;

}
.c{
top:30px;
left:30px;
background:green;

}
</style>

</head>

<body>
<div class="da">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>
</body>
</html>


Position 属性的运用 - zxy3622008 - zxy3622008的博客

我们发现 前面的两个div 是被第三个给盖上了 。并且三块脱离了父级标签 在窗口左上角显示了。这也是前面说道的相对于body左上角坐标定位。

接下来我么给父级加上相对定位。

.da{
position:relative;
margin:50px auto;
width:500px;
height:400px;
background:blue;
}


 Position 属性的运用 - zxy3622008 - zxy3622008的博客
发现三个div重新回到了父级标签

接下我们在改变z-index值来看下功能

.a{
z-index:1;
top:10px;
left:10px;
background:red;

}
.b{
z-index:2;
top:20px;
left:20px;
background:yellow;

}
.c{
z-index:-1;
top:30px;
left:30px;
background:green;

}

Position 属性的运用 - zxy3622008 - zxy3622008的博客
 
 第三个div跑到下面去了
  评论这张
 
阅读(27)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017