css使后声明的标签显示在前的方法

具体方法：将后声明的标签的css属性设为absolute。

其余标签：将float属性赋值，且使用margin属性将首个标签推出absolute标签的范围（实测top属性无效）。

目前我的模板里还没有使用这个方法，所以左边栏非常难控制，会在后续版本更改。

demo：

 1 <html>
 2 <head>
 3     <style type="text/css">
 4
 5     div.outerDiv { width:72px; height:600px; border: 2px solid black; }
 6     div.outerDiv>div { width:60px; height:150px; }
 7     div.outerDiv>div.innerFirst { position:absolute; }
 8     div.outerDiv>div.innerSecond { float:left; margin-top:160px; }
 9     div.outerDiv>div.innerAfter { float:left; }
10
11     </style>
12 </head>
13
14 <body>
15     <div class="outerDiv">
16         <div class="innerSecond" style="background-color:green;"></div>
17         <div class="innerAfter" style="background-color:blue;"></div>
18         <div class="innerAfter" style="background-color:yellow;"></div>
19         <div class="innerFirst" style="background-color:red;"></div>
20     </div>
21 </body>
22 </html>

时间： 2024-11-14 12:40:21

css使后声明的标签显示在前的方法的相关文章

ＱＴ中用ｌａｂｅｌ标签显示本地图片的方法

#define CIMAGE_H#include<QtGui/QDialog>#include<QLabel> class QLabel;class QLineEdit;class QPushButton; class CImage:public QDialog{ Q_OBJECTpublic: CImage(QWidget *parent=0); virtual ~CImage() {}private: QLabel *ImageLabel; QPushButton *Image

用CSS让字体在一行内显示不换行（收藏）

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块): .text-overflow{display:block; /*内联对象需加*/width:31em;word-break:keep-all; /* 不换行 */white-space:nowrap; /* 不换行 */overflo

用CSS让字体在一行内显示不换行

青枫 , 2012/07/13 18:08 , css样式设计 , 评论(0) , 阅读(2189) , Via 本站原创大 | 中 | 小当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢? 用CSS让文字在一行内显示不换行的方法一般的文字截断(适用于内联与块): .text-overflow{display:block; /*内联对象需加*/width:31em;word-break:kee

同一标签内多个css规则在页面中如何显示？

这两天在学习css涉及到内联.外联.嵌入对页面的影响: 1.内联式-----将css代码直接写在html中.用 <style> 标记将样式定义为内部块对象.示例代码如下如下: <style type="text/css">  </style> 内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力

?Highmaps网页图表教程之绘图区显示标签显示数据标签定位

?Highmaps网页图表教程之绘图区显示标签显示数据标签定位 Highmaps数据标签定位由于数据标签是和节点一一对应,所以数据标签是依据节点位置进行定位的.本节详细讲解如何对数据标签进行定位. Highmaps节点定位在mappoint.mapbubble.mapline图表类型,节点都有明确位置.而在map图表类型中,节点对应的是一个区域.所以,map图表类型的节点中心位置就可以由用户来设定.设置时候需要使用到以下两个配置项: middleX: Number1 middleY: Num

jmeter+ant+jenkins+mac使用HTML Publisher插件后查看html报告显示不正常

Jenkins安全默认将以下功能关闭: 1.javascript2.html上的内置插件3.内置css或从其它站的css4.从其它站的图处5.AJAX 报告中有javascript,所以显示异常.解决方法如下: 在jenkins系统管理-脚本命令行中输入以下脚本运行: System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "") 运行后查看报告,可正常显示. 不过重启jenkins后又会显示异常

css 使元素水平居中

css使元素水平居中 1.对于行内元素的水平居中给父元素设置text-align:center <div style="text-align:center;">居中显示</div> 2.定宽块状元素水平居中 <div style="width:200px;margin:20px auto;";>居中显示</div> 注:对于以上情况可以灵活应用可以将元素设置 display:inline ,将其变为行内元素,再按照

ie6下js更新元素display:block后，仍然不显示的hack办法

$hotGames.html(html).removeClass("hide").show();//代码执行到这里,在ie6下仍然无法正常显示 //只有执行了下边的两行代码后,才正常显示.if (isIE6 === true) { $hotGames.css({"position":"absolute"}); setTimeout(function(){$hotGames.css({"position":"stati

使用CSS使内容垂直居中的N中方法。

使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: 1.1绝对定位法: CSS: .middle-div{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } .parent-div{ position:relitive;