运行结果：

<!DOCTYPE html>

<html>

<head>

	<title>重叠样式窗口</title>

	<style type="text/css">

		div.window{						/*指定窗口的尺寸和边框*/

			position:absolute;			/*position在其他地方指定*/

			width: 300px; 				/*窗口尺寸，不含边框*/

			height: 200px;

			border: 3px outset gray;	/*注意3D “outset”边框效果*/

		}

		div.titlebar{					/*指定标题栏的定位、尺寸和样式*/

			position: absolute;			/*他是定位元素*/

			top:0px;height: 18px;		/*标题栏18px+內边距和边框*/

			width:290px;				/*290+5px 左右內边距 = 300*/

			background-color: #aaa;		/*标题栏颜色*/

			border-color: groove gray 2px;/*标题栏只有底部边框*/

			padding: 3px 5px 2px 5px;	/*顺时针值：top right bottom left*/

			font:bold 11pt sans-serif;	/*标题栏字体*/

		}

		div.content{					/*指定窗口内容的尺寸、定位和滚动*/

			position: absolute;			/*他是定位元素*/

			top: 25px;					/*18px标题+2px边框+3px+2px內边距*/

			height: 165px;				/*200px总共 - 25px标题栏-10px*/

			width:290px;				/*300px宽度-10px内编剧*/

			padding: 5px;				/*4条边上都有空间*/

			overflow: auto;				/*如果需要，则显示滚动条*/

			background-color: #fff;		/*默认白色背景*/

		}

		div.translucent{				/*此类让窗口部分透明*/

			opacity: .75;				/*透明度标准样式*/

			filter: alpha(opacity=75);	/*IE的透明度*/

		}

	</style>

</head>

<body>

<!-- 定义一个窗口：“window” div友谊个标题栏和

其内是以个内容div。注意，如何设置定位

一个扩充了样式的style属性 -->

<div class="window" style="left:10px; top:10px; z-index: 10">

	<div class="titlebar">测试窗口</div>

	<div class="content">

		1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>……

		1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>

		1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>

	</div>

</div>

<!-- 定义另一窗口；用不容的定位、颜色和字体重量 -->

<div class="window" style="left:75px; top:110px; z-index: 20">

	<div class="titlebar">另一个测试窗口</div>

	<div class="content translucent" style="background-color: #ccc;font-weight: bold;">

		这是另一个窗口区域

	</div>

</div>

</body>

</html>

　　

css 定位属性position的使用方法实例-----一个层叠窗口的更多相关文章

  1. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  2. CSS - 定位属性position使用详解（static、relative、fixed、absolute）

    position 属性介绍 (1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型.所有主流浏览器都支持 position 属性. (2)position 的可选值有四个:sta ...

  3. 关于CSS定位属性 position 的使用

    CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位, ...

  4. CSS定位属性position相关介绍

    position属性用来定义元素的定位方式. 定位相关属性值 1.static 默认值 2.absolute 绝对定位 3.fixed 固定定位 4.relative 相对定位 5.sticky 粘性 ...

  5. css中的定位属性position（转）

    css中的定位属性position   同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...

  6. css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）

    css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...

  7. 定位属性position

    定位属性position小结 1.元素为fixed(固定的),则是固定定位,即使是子元素,也不参考父元素的位置,即以浏览器作为参考定位.相当于电脑屏幕的一只蚂蚁,你无论怎么滑动屏幕,还是在原来的位置. ...

  8. CSS定位属性

                  定位属性                                                              position属性 1.      s ...

  9. 前端~定位属性position（relative、absolute、fixed）的分析

    前端~定位属性position(relative.absolute.fixed)的分析 1,简单了解: relative:移动自身时,参考自身的原来位置而移动,移动子元素(子元素设置了absolute ...

随机推荐

  1. js设置，获取，删除Cookie

    //JS操作cookies方法! //写cookies function setCookie(name,value) {     var Days = 30;     var exp = new Da ...

  2. 在Quo.js下Tap和singleTap的区别

    前两天上网搜开发手机页面的JS,看到了Quo.js下载下来后来看了一下,支持的触屏手势挺多的,在一般的开发中应该够用了,更让我喜欢它的一点是它跟JQ差不多(虽然功能不如JQ强大但是语法基本一致).这就 ...

  3. 使用类似于中介者模式实现不同VC之间的跳转

    在2013年的时候,我们就已经实现了类似于http地址进行页面跳转, 那个时候,主要是用继承ViewController和给 UIViewController和UINavigationControll ...

  4. Spring学习（14）--- 基于Java类的配置Bean 之 @ImportResource & @Value 注解

    学习如何使用@ImportResource 和 @Value 注解进行资源文件读取 例子: 先创建一个MyDriverManager类(模拟读取数据库配置信息) package com.beanann ...

  5. 基于C#的接口自动化测试(一)

    其实就是找个地方然后给关键的代码做个笔记什么的-- 字符串访问API接口,访问方法为POST: string url = URL; string RequestParam = Param; strin ...

  6. 常用linux小工具介绍

    1.ctags(Generate tag files for source code)是vim下方便代码阅读的工具.尽管ctags也可以支持其它编辑器,但是它正式支持的只有VIM. ctags 最先是 ...

  7. cordova 插件开发

    从事基于cordova开发混合APP也快一年了,一直没有自己"亲自操刀"写一个插件,因为网上插件太丰富了,可耻了. 今天完整的记录一次插件开发. cordova环境6.4.0 第一 ...

  8. epclise设置tomcat方法（步骤）（菜鸟巧记二）

    epclise设置tomcat 1.打开epclise→window→preferences 2.输入server,打开server→runtime environments→选择add新建 3.打开 ...

  9. 解决Ubuntu开关机动画不正常方法

    联想的笔记本,显卡NVIDIA GT218M,默认使用开源的驱动,但挂起后,再唤醒就黑屏回不到桌面. 1.解决办法:安装NVIDIA专有驱动 $sudo apt-get install nvidia- ...

  10. [0] 领域模型 VS 贫血模型

    贫血→结构体领域→封装方法的类 1.领域模型 也要能够 到达解耦,最好不要出现billdao.InsertBill(obj)这种2.领域方法 最好是自身的方法,如改变一个属性值,添加一个子集,而不是一 ...