1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

2天驾驭DIV+CSS!第六课

作者:用户 来源:互联网 时间:2016-06-27 20:04:47

属性定位position元素absolute左上角position属性position:absolute父divdiv改变大小4级页面定位属性父级父级元素

2天驾驭DIV+CSS!第六课 - 摘要: 本文讲的是2天驾驭DIV+CSS!第六课, 如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute 注:在做这节

如果用position来布局页面,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute

注:在做这节教程的时候,我又上网查了相关资料,看了大量的文章,做了大量的测试,最后总结出下面这些文字,洋洋洒洒一整篇,不过需要大家一句话一句话的看,一定要仔细喽!还有对于课程中的说的,最好一边看,一边练,不练绝对看不懂!

定位(position)布局页面说容易非常容易,只需要记住这节课最后一句话就可以了,说困难,那是相当的难理解,需要一定的耐心,不过还好,KwooJan给大家总结的已经很通俗易懂了。

如果下面的文字实在是无法理解透,那就记住这节课最后总结的一句话“如果用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的值。
=============================================
下节课我将拿第5节的例子,给大家讲讲,如何用position布局


本文来自www.cssxuexi.cn *尊重他人劳动成果,转载请自觉注明出处! 



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索属性 , 定位 , position , 元素 , absolute , 左上角 , position属性 , position:absolute , 父div , div改变大小 , 4级页面 , 定位属性 , 父级 父级元素 2天驾驭div css、一堂课学会div css、div css课件、div css、div css教程,以便于您获取更多的相关知识。

jquery-jQuery的问题!!!!!!!

...是 "+$("#sel2").find("option:selected").text()+'--->'+day+"天"); var lj1 = 0; lj1 = input1+lj; $("#lj1").val(lj1.toFixed(2)); var lj2 = 0; lj2 = (input1+lj)*0; $("#lj2").val(lj2.toFixed(2)); } //计...

JavaScript驾驭网页-获取网页元素_javascript技巧

推荐阅读:JavaScript驾驭网页-DOM JavaScript驾驭网页-CSS与DOM 利用DOM分割HTML 利用JavaScript控制网页内容其实很像烹饪。只是不用收拾列羹剩肴,但也没有办法享受美味的成果。 不过,你将能完整网页内容的HTML构成要素:更重要的...

【php基础班】第7天 overflow属性、CSS引入方式、定位、布局、margin合并问题、浏览器兼容

...元素设置绝对定位。配合着定位坐标。 第五节 限时抢 第六节 margin合并的问题 n  margin,上下合并(大吃小),左右叠加 第七节 常见布局 第八节 浏览器兼容性 浏览器市场份额:http://tongji.baidu.com/data/browser 常用兼容性技巧...

初接触 Sass 与Compass 遇到的几个坑

...些预处理器是偷懒人士的做法,但现在发现应该是用CSS 驾驭得好的才能用好这些预处理器。提高效率的工具之所以能提高效率在于使用的人本身有能力驾驭这个工具(有点拗口)。并且很考验开发者的整体的重构能力,貌似一...

[JQuery] JQuery第六课

说明 本文转自JQuery/jquery-dom-get.html">菜鸟教程。 JQuery获取内容和属性获得内容 三个简单实用的用于DOM操作的JQuery方法: text():设置或返回所选元素的文本内容html():设置或返回所选元素的内容(包括HTML标记)val():设置或返...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备