CSS之绝对定位深入研究

2016-02-19 17:23 4 1 收藏

下面是个超简单的CSS之绝对定位深入研究教程，图老师小编精心挑选推荐，大家行行好，多给几个赞吧，小编吐血跪求~

【 tulaoshi.com - Web开发】

　　一、下看个两个例子

　　1.xhtml代码

body
　div　class="relative"
　　　　span　class="absolute"Test　absolute/span
　/div　
/body

　　2.css代码

.relative　{　position:relative;height:120px;　border:2px　solid　black;　}
.absolute　{　position:absolute;　top:10px;　left:10px;
　　　　　　　　　　　　　　　padding:5px;　text-align:center;　
　　　　　　　　　　　　　　　border:5px　solid　black;　background-color:gold;　}

　　3.运行的结果

　　4.改进css

　　去掉span父元素的定位。css代码如下，

.relative　{　height:120px;　border:2px　solid　black;　}
.absolute　{　position:absolute;　top:10px;　left:10px;
　　　　　　　　　　　　　　　padding:5px;　text-align:center;　
　　　　　　　　　　　　　　　border:5px　solid　black;　background-color:gold;　}

　　5.修改后运行结果

　　二、对结果的分析

　　绝对定位的元素的位置相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，根据用户定义的不同，最初的包含快可能是body或者html元素；绝对定位的元素会从文档流中分离，不再占据空间； position:absolute完成绝对定位需要top和left属性的共同作用。

　　所以，当我们想使用绝对定位的核心思想是，让一个元素脱离正常文档流的排列，让它相对于另一个元素重新排列。

来源:http://www.tulaoshi.com/n/20160219/1615099.html

看过《CSS之绝对定位深入研究》的人还看了以下文章更多>>

深入研究Application和Session对象(2)

标签： ASP

二、Session对象的成员概述 Session对象的成员比Application对象多一项属性，即：集合、属性、方法、事件 ⒈Session对象的集合 Contents ：没有使用<OBJECT元素定义的存储于特定Session对象的所有变量的集合。 StaticObject：使用<OBJECT元素定义的、存储于Session对象中的所有变量的集合。例：在defau...

深入研究表单提交方式:GET/POST

标签： PHP

大家知道目前表单提交的方式有GET和POST。我在这里不多说什么，给大家看一个以GET方式提交的表单的请求： GET /cgi-bin/tech/method.cgi?GET=GET HTTP/1.1 Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-powerpoint, application/vnd...

深入研究“用ASP上载文件”(二)

标签： ASP

二、在ASP中执行现在已经得出结论，RFC1867是在WEB应用程序上载文件的最好方式。那么如何来运行？Microsoft提供了什么方法？其它有哪些方法可以用？ Microsoft的Posting Acceptor ASP不支持multipart/form-data编码方式，但是，Microsoft提供了免费的Posting Acceptor(http://www.microsoft.com/iis/support/iis...

CSS中关于相对定位和绝对定位

标签： Web开发

style body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e { width: 100px; height: 100px; margin: 5 auto; color: #fff; background: #000; } .aa, .bb, .cc, .dd, .ee { top: 10px; left: 10px; width: 10px; ...

深入研究“用ASP上载文件”(一)

标签： ASP

现在“瘦客户”的观点已经是一个神话了，但随着电视或掌上型浏览器的繁荣，这一状况会有所改变。今天绝大多数的网络客户仍使用功能强大的PC，附着着大量的客户端存储器和客户端感兴趣的内容。在Internet协议下，将文件传递到中央服务器有一些方法可供选择，但基于WEB的文件上载比其它方法都要高级。下面来检验这一点。一、HTTP...

查看更多精彩>>