css position 定位

所属分类: 网页制作 / CSS 阅读数: 377
收藏 0 赞 0 分享

如果下面的文字实在是无法理解透,那就记住这节课最后总结的一句话“如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。”

任何元素的默认position的属性值均是static,静态。这节课主要讲讲relative(相对)以及absolute(绝对)。

【position:absolute】
意思是:他的意思是绝对定位,他默认参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,有以下属性:


1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角,如果在没有父级元素的情况下,存在文本,则以它前面
的最后一个文字的右上角为原点进行定位但是不断开文字,覆盖于上方。
2)如果设定TRBL,并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
3)如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由TRBL决定。即使父级有Padding属性,对其也不起作用,说简单点就是:它只坚持一点,就以父级左上角为原点进行定位,父级的padding对其根本没有影响。

以上三点可以总结出,若想把一个定位属性为absolute的元素定位于其父级元素内,只有满足两个条件,
第一:设定TRBL
第二:父级设定Position属性
上面的这个总结非常重要,可以保证你在用absolue布局页面的时候,不会错位,并且随着浏览器的大小或者显示器分辨率的大小,而不发生改变。

只要有一点不满足,元素就会以浏览器左上角为原点,这就是初学者容易犯错的一点,已经定位好的板块,当浏览器的大小改变,父级元素会随之改变,但是设定Position属性为absolute的板块和父级元素的位置发生改变,错位了,这就是因为此时元素以浏览器的右上角为原点的原因。

初学者很容易犯错的是,不清楚Position属性为absolute的板块,若想定位到父级板块中,并且当浏览器的大小改变或显示器的分辨率改变,布局不发生改变,是需要满足两个条件的,只要有一点不满足,元素就会以浏览器左上角为原点,从而导致页面布局错位。

【position:relative】
意思是相对定位,他是默认参照父级的原始点为原始点,无父级则以文本流的顺序在上一个元素的底部为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位,有以下属性:


1)如果没有TRBL,以父级的左上角,在没有父级的时候,他是参照浏览器左上角(到这里和absolute第一条一样),如果在没有父级元素的情况下,存在文本,则以文本的底部为原始点进行定位并将文字断开(和absolut不同)。
2)如果设定TRBL,并且父级没有设定position属性,仍旧以父级的左上角为原点进行定位(和absolut不同)
3)如果设定TRBL,并且父级设定position属性(无论是absolute还是relative),则以父级的左上角为原点进行定位,位置由TRBL决定(前半段和absolut一样)。如果父级有Padding属性,那么就以内容区域的左上角为原点,进行定位(后半段和absolut不同)。

以上三点可以总结出,无论父级存在不存在,无论有没有TRBL,均是以父级的左上角进行定位,但是父级的Padding属性会对其影响。
综合上面对relative的叙述,我们就可以将position属性为relative的DIV视成可以用TRBL进行定位的的普通DIV,或者说只要将我们平时
布局页面的div的CSS属性中加上position:relative后,就不只是用float布局页面了,还可以用TRBL进行布局页面了,或者说加上
position:relative的DIV也可以像普通的DIV进行布局页面了,只不过还可以用TRBL进行布局页面。但是position属性为absolute不可以
用来布局页面,因为如果用来布局的话,所有的DIV都相对于浏览器的左上角定位了,所以只能用于将某个元素定位于属性为absolute的
元素的内部某个位置,这样我们就可以总结比较重要的结论

属性为relative的元素可以用来布局页面,属性为absolute的元素用来定位某元素在父级中的位置

既然属性为absolute的元素用来定位某元素在父级中位置,就少不了TRBL,这时候根据一开始讲的absolute的第三条,如果父级元素没有position属性那么absolute元素就会脱离父级元素,但是如果是布局页面,父级元素position的属性又不能为absolute,不然就会以浏览器左上角为原点了,所以父级元素的position属性只能为relative!

总结:如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素的padding的属性影响,当然你也可以用position,不过到时候计算的时候不要忘记padding的值。

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多