CSS教程:position属性

互联网 发布时间：2009-04-02 19:36:08 作者：佚名

网页制作Webjx文章简介：position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。所以实际上可用的值只有3个为了方便阅读~
以下统称为：固定(fixed)、相对(relative)、绝对(absolute).
第1：固定定位(fixed)
固定定位可以让某一元素固定在屏幕的某个位置.其效果和背景的background-attachment:fixed属性相似！但是IE6以及更早的版本不支持.所以以下例子请在非IE6以下浏览器下浏览
例子：
运行代码框

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta name="author" content="aslen" />

<meta name="Copyright" content="www.gongchang.com" />

<style>

*{margin:0;padding:0}

</style>

</head>

<body>

<div style="position:fixed;height:50px;width:50px;background:#f00;left:50px;top:50px;"></div>

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

<br />换行

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
第2：相对定位(relative)
相对定位是依据设置定位属性的4个方向上的任意值来实现相对与其本来在文档中正常显示的位置的偏移；
当相对定位的元素偏移出其本来的文档流的位置：其他元素仍然认为那个位置为其的逻辑文档流区域.而不会去补上去，虽然我们感官上认为那里是没有东西的~
例子：
运行代码框

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="aslen" />

<meta name="Copyright" content="www.gongchang.com" />

<style type="text/css">

*{padding:0;margin:0}

</style>

</head>

<body>

<div style="width:500px;background:#CC9900;height:30px">1</div>

<div style="width:500px;background:#ff0000;height:30px;position:relative;left:10px;top:20px;">2</div>

<div style="width:500px;background:#CC9900;height:30px">3</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
其中第2个色块就是相对于其本来的文档流中的位置依据left:10px;top:20px;的定位属性值进行偏移.
其后面的第3个色块依然认为前面的空白（就是第3的原本的文档流的位置）为第3个色块的文档流区域则不会自动填充上去.
当相对定位的父元素出现滚动条时，IE浏览器的特殊情况
例子：
运行代码框

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="aslen" />

<meta name="Copyright" content="www.gongchang.com" />

<style type="text/css">

*{padding:0;margin:0}

</style>

</head>

<body>

<div style="width:500px;height:150px;overflow:auto;">

我是正常文档流的文字

<div style="width:300px;background:#ff0000;height:20px;position:relative;">我是相对定位，拉动滚动条 看我在那里</div>

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

我是正常文档流的文字<br />

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
当相对定位的父元素有滚动条的时候，该相对定位元素再IE的表现很诡异（其后面的元素依然认为那个位置为该元素的默认位置，而表现出相对定位的特性，但是拉动滚动条时，在FF下正常即相对定位的元素和文档一起滚动，但是在IE系列里面，相对定位的色块依然在原地不动，此时元素的特性有点像绝对定位）
当相对定位同时拥有定位属性的4个方向的值和margin属性。相对定位的定位属性 top right bottom left和margin-top margin-right margin-bottom margin-left;各个方向上一至的时候其值会产生叠加效果，而按照方向执行叠加后的数值的偏移
例子：
运行代码框

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="aslen" />

<meta name="Copyright" content="www.gongchang.com" />

<style type="text/css">

*{padding:0;margin:0}

</style>

</head>

<body>

<div style="height:50px;background:#f00;position: relative;left:100px;margin-left:-100px;">

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

CSS中的元素定位方法详解
这篇文章主要介绍了CSS中的元素定位方法详解,是CSS入门学习中的基础知识,需要的朋友可以参考下
2015-07-21
详解CSS 子元素相对于父元素固定定位解决方案
这篇文章主要介绍了详解CSS 子元素相对于父元素固定定位解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小
2020-09-03
css子元素相对父元素进行定位的实现
这篇文章主要介绍了css子元素相对父元素进行定位的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起
2020-09-02
css position 设置元素的定位方式详解
下面小编就为大家带来一篇css position 设置元素的定位方式详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-05
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
这篇文章主要介绍了CSS元素定位之通过元素的标签或者元素的id、class属性定位，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的
2022-09-08

CSS教程:position属性

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容