CSS教程:position属性

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

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

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
3.在IE下没有设置定位属性4个方向的值的绝对定位的块元素的表现是inline-block 再FF下其是block
例子：
运行代码框

<!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:#ff0000;position:absolute;height:30px;">我是一个具有绝对定位属性的块元素~你在IE下看我再那里，你再FF下看我再那里</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
这个其实是浏览器的差异，在FF下在块元素拥有position:absolute属性后，其依然作为一个块元素，而相对于前面的文档流而换行，所以为了统一，在这种使用情况下，可以加上display:inline即可保证各个浏览器统一
4.绝对定位元素依据其定位基点进行绝对定位时会忽视其定位基点的padding空间
例子：
运行代码框

<!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="padding:100px;width:500px; position:relative; background:#f00;height:500px;margin:0 auto">

<div style="width:400px;background:#CC9900;height:30px;top:0;position:absolute">我是一个具有position属性；且定位属性为top:0px;你看我再那里</div>

我是正常文档流中的文字

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
图中的红色区域是一个高度和宽度为500px且padding:100px;因为绝对定位元素忽视其定位基点的padding属性，所以在顶部呈现
5.设置任何一个方向的定位属性.该绝对元素除该方向按照定位属性的值依据其具有position属性最近的父元素为基点进行定位.其另外方向上的逻辑位置依然受前一文档流中的元素影响.按照正常的位置进行布局：
例子：
运行代码框

<!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;position:absolute;height:30px;left:40px;">我是一个具有绝对定位，且只有left:40px这个定位属性；你看再我那里</div>

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

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
我们可以看到图中的红色区域，除按照left:40这个属性偏移40像素后，其垂直方向的位置依然为正常文档流中的位置

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容