CSS布局之定位详解(position)

编程之家收集整理的这篇文章主要介绍了CSS布局之定位详解(position)编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、relative

将某一个元素设置为相对定位后,通过设置left、right、top、bottom,它可以参照自己的原始位置进行移动。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

<!doctype html>
<html>
<head>
<Meta charset="utf-8">
<title>相对定位示例</title>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px/*左边距减20px,相对于原来的位置左移20px*/
}
h2.pos_right
{
position:relative;
left:20px/*左边距加20px,相对于原来的位置右移20px*/
}
</style>
</head>

<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
</body>

</html>

二、absolute

相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素(已定位的意思是指设置了position:relative),如果不存在已定位的祖先元素,那么“相对于”最初的包含块。

层级关系为:

<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————- position:relative 以这个div为参照物
<div Box1
<div Box2 ——–position:absolute; top:50px; left:120px;
<div Box3
效果图:

Box2以橘色div为参照物
层级关系为:
<div ——————————— position:relative;最近的祖先定位元素,参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div Box1
<div Box2 ——–position:absolute; top:50px; left:120px;
<div Box3
效果图:

因为橘色div是最初的包含块,所以在都不设置定位的情况下,认以橘色div为参照物
层级关系为:
<div ———————————没有设置为定位元素,不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div Box1
<div Box2 ——–position:absolute; top:50px; left:120px;
<div Box3
效果图:

 

此外,还要注意仅使用margin属性布局绝对定位元素的情况
此情况,margin-bottom 和margin-right的值不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。另外,不管它的祖先元素有没有定位,都是以文档流中原来所在的位置上偏移参照物。 
图9中,使用margin属性布局相对定位元素。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div Box1
<div Box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div Box3
效果图:

IE6的情况下,Box2前面没有兄弟节点,则margin-left的值会出现双倍边距,见图10。
层级关系为:
<div ——————————— position:relative; 不是参照物
<div—————————-没有设置为定位元素,不是参照物
<div———————-没有设置为定位元素,不是参照物
<div Box1
<div Box2 ——–position:absolute; margin-top:50px; margin-left:60px;
<div Box3
效果图:

三、fixed

元素框的表现类似于absolute,不过其包含块是视窗本身。

参考:http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html

总结

以上是编程之家为你收集整理的CSS布局之定位详解(position)全部内容,希望文章能够帮你解决CSS布局之定位详解(position)所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的HTML相关文章

Mip是什么意思以及作用有哪些
MIP安装的具体步骤有哪些
怎么使用MIP组件
Mip的内联框架组件是什么
Mip轮播图组件中的重要属性讲解
HTML添加超链接、锚点的方法及作用详解(附视频)
怎么创建初始的MIP配置及模板文件
jQuery表单验证提交:前台验证一(图文+视频)
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注