CSS教程:position属性

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

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

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
第3：绝对定位(absolute)
当元素设置绝对定位后.则会从正常的文档流中脱离.其后面的元素会完全忽视这个绝对定位的元素.就好像正常文档流中不存在这个元素一样.然后根据离其最近的一个具有position属性的父对象的边缘为定位基点（如果没有没有这样一个父对象那么默认依据窗口元素定位），根据设置定位属性的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;margin-top:1px;height:30px;position:absolute;left:10px;top:20px;">2</div>

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

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
我们可以看到.当色块2设置绝对定位之后.后面的第3色块忽视其存在，自动填补到正常的文档流中（这个是根据窗口元素定位）
我们再来看一下IE中依据窗口元素定位的一个特殊情况
例子：
运行代码框

<?xml version="1.0" encoding="utf-8"?>

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

html{background: #0099FF;padding:100px;}

body{color:#FFFFFF;background:#FF00FF;padding:100px;width:400px;position:relative;}

.wapper{background:#FF6600;}

.abso {width:200px; height:200px; border:1px #000 solid; position:absolute;left:0px;top:0px;background:#00FF00}

</style>

</head>

<body>

<div class="wapper">

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

<br />

此DEMO测试IE6的Quirks mode模式以及position定位参考的窗口元素

<div class="abso">绝对定位</div>

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
此DEMO与position:absolute的定位工作方式无关~只是作为IE中特殊的情况列出来
除了上面的基本的position:absolute特点，其还有下面几点；
1.如果我们只设置了position:absolute而没有设置定位属性的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:200px;background:#ff0000;position:absolute;height:30px">2</div>

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

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
例子中第2个红色的色块就是一个只具有position:absolute属性的元素，它仍然在正常的布局位置呈现，只不过后面的元素会忽视其存在
2.绝对定位会自动把一个元素转化为块元素
例子：
运行代码框

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

<span style="width:500px;background:#CC9900;height:30px;position:absolute">我们知道行间元素设置宽、高是被忽略的，你看看这个页面的显示</span>

</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属性

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容