CSS教程:position属性

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

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

position属性可以让你让你随意控制一个特定元素在浏览器何处以及如何显示。比方说我们用position:fixed 让一个图片显示在浏览器的左上角.即使出现滚动条他依然可以在浏览器的左上角.posotion属性有4个取值.由于static为默认的方式。
6.当元素设置为绝对定位后改元素内的浮动会自动清除
例子：
运行代码框

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

li{float:left;width:500px;height:40px;background:fuchsia; list-style:none}

</style>

</head>

<body>

<ul style="border:1px blue solid;width:500px;padding:50px;background:green;position:absolute">

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

<li>我是浮动的元素</li>

</ul>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
7.当绝对定位同时拥有定位属性和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="width:500px;height:50px;background:#f00;position: absolute;left:100px;margin-left:100px;">

我一个具有position:absolute;且left:100px;margin-left:100px

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
我们会发现这个红色的色块距离左边200PX.left margin-left
小结：
当元素同时拥有浮动和绝对定位时.绝对定位的优先权大于浮动.因为浮动受文档的逻辑结构位置限制。而绝对定位不会。
所以当绝对定位脱离文档流，绝对定位的元素不受浮动影响.即float:left会失效，
数学上我们知道.X轴上一个数值 Y轴上的一个数值即可确定一个点，感官上left right属于x轴bottom top属于Y轴。
我们完全可以设置一个无宽度和高度绝对定位的元素同时拥有top right bottom left来实现其根据其参考的定位基点的父元素的的大小来自适应大小.
但是IE6不支持.IE6只能识别left的值而忽视right.所以下面例子请在非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=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:500px;background:#f00;position: relative;width:500px; margin:100px auto">

<div style="position:absolute;left:100px;top:100px;bottom:100px;right:100px;background:#0066FF">我是绝对定位 我自适应我的定位基点的元素</div>

</div>

</body>

</html>

[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]
实际应用:（个人的习惯）

标题（“标题文字”和“更多”）（相对绝对）需要让一些具有vertical-align:middle属性的元素抽出文档流（这个看具体情况，因为vertical-align:middle会影响文档中的文字对齐）（绝对）固定元素的浮动块（该浮动块内的元素布局固定可以用绝对定位，并设置该浮动块为相对）(相对绝对)

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

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容