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

CSS的position属性详解

2015-09-28 10:39 761 查看

position属性的定义和用法:

检索或设置对象的定位方式。

设置此属性值为absolute 会将对象拖离出正常的文档流而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有margin，但仍有padding和边框border。

要激活对象的绝对定位，不但要设置此属性值为absolute，而且必须指定left，right，top，bottom属性中的至少一个。否则上述属性会使用他们的默认值auto
，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。

设置此属性值为relative 会保持对象在正常的HTML流中，但是会根据对象本身原来的位置进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的，在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

对应的脚本特性为position。

语法结构:

position：static | relative | absolute | fixed

取值:

static:无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用，默认值。

relative:对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。

absolute:对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

fixed:对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。IE6不支持此属性值。
浏览器支持:

IE浏览器支持此属性。

火狐浏览器支持此属性。

谷歌浏览器支持此属性。

opera浏览器支持此属性。
注意:IE6不支持fixed属性值。

继承性:

没有继承性。
实例代码:

实例一:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>position属性-蚂蚁部落</title>
<style type="text/css">
.mytest{
width:200px;
height:100px;
border:1px solid blue;
position:static;
top:40px;
}
</style>
</head>
<body>
<div class="mytest">蚂蚁部落欢迎您</div>
</body>
</html>

static是对象的默认定位值，无任何特殊定位，所以top属性将会被忽略。

实例二:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>position属性-蚂蚁部落</title>
<style type="text/css">
.parent{
width:300px;
height:300px;
border:1px solid #606;
}
.first{
width:100px;
height:100px;
border:1px solid blue;
position:relative;
top:30px;
}
.second{
width:100px;
height:100px;
border:1px solid #606;
}
</style>
</head>
<body>
<div class="parent">
<div class="first">我是第一个孩子</div>
<div class="second">我是第二个孩子</div>
</div>
</body>
</html>

first对象进行相对定位，它所相对的元素就是它自己本身的位置。而second的对象不会受到first对象的影响，依然会呆在它原来的地方。

实例三:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>position属性-蚂蚁部落</title>
<style type="text/css">
.grandfather{
width:400px;
height:400px;
border:1px solid green;
position:relative;
}
.parent{
width:300px;
height:300px;
border:1px solid #606;
}
.first{
width:100px;
height:100px;
border:1px solid blue;
position:absolute;
bottom:50px;
}
.second{
width:100px;
height:100px;
border:1px solid #606;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="parent">
<div class="first">我是第一个孩子</div>
<div class="second">我是第二个孩子</div>
</div>
</div>
</body>
</html>

以下代码可以看出绝对定位对象的参考对象并非都是body或者它的最近得父对象，而是距离它最近的带有position属性并且属性值不为static的父对象。下面的first对象就是以grandfather作为偏移参考对象的。

实例四:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>密码强度提示功能-蚂蚁部落</title>
<style type="text/css">
.grandfather{
width:400px;
height:400px;
border:1px solid green;
position:relative;
}
.parent{
width:300px;
height:300px;
border:1px solid #606;
}
.first{
width:100px;
height:100px;
border:1px solid blue;
position:fixed;
bottom:50px;
}
.second{
width:100px;
height:100px;
border:1px solid #606;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="parent">
<div class="first">我是第一个孩子</div>
<div class="second">我是第二个孩子</div>
</div>
</div>
</body>
</html>

postion的fixed定位永远是以body作为偏移参考对象的。

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

标签： css

相关文章推荐

新的分享

章节导航