运行结果：

<!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. Java解析word文档

    背景 在互联网教育行业,做内容相关的项目经常碰到的一个问题就是如何解析word文档. 因为系统如果无法智能的解析word,那么就只能通过其他方式手动录入word内容,效率低下,而且人工成本和录入出错率 ...

  2. linux压缩及vi操作

    一:Linux的压缩方式 1.tar cvf 对文件进行压缩,tar cvf+压缩文件完成的命名+需要压缩的文件 2,tar -tf +命名的压缩文件:表示查看目录里面的内容 3,tar -xf 解压 ...

  3. dialog使用方法(同一页面，调用一个js代码，实现多个不同样式的弹窗)

    html代码 <!DOCTYPE html><html><head>     <title></title>     <meta ch ...

  4. setTimeout异步加载

    两道经典的面试题,直接上代码 for(var i=0; i<3; i++){ setTimeout(function(){ i+=i; console.log(i); },1000) } var ...

  5. Nim 博弈和 sg 函数

    sg 函数 参考 通俗易懂 论文 几类经典的博弈问题 阶梯博弈: 只考虑奇数号楼梯Nim,若偶数楼梯只作容器,那么游戏变为Nim.题目 翻转硬币: 局面的SG值为局面中每个正面朝上的棋子单一存在时的S ...

  6. PHP 获取系统信息，PHP 获取服务器详细信息

    获取系统类型及版本号:    php_uname()                                   (例:Windows NT COMPUTER 5.1 build 2600)只 ...

  7. python面向对象的编程

    self相当于在实例化类的过程中传入参数,实例化对象本身 静态方法,静态字段属于类,动态字段,动态方法输入每一个实例化的对象 类实例化的过程把一些属性,方法封装到一个实例化对象当中 动态字段,动态方法 ...

  8. CentOS6.8安装python2.7以及XX-Net

    xx-net在ubuntu上运行用起来很方便,如果有一些原因必须用CentOS,麻烦就比较大了. 首先需要升级python版本,CentOS自带的2.6版本是用不了的,必须升级到2.7以上,但是不能用 ...

  9. Bottle源码阅读笔记（二）：路由

    前言 程序收到请求后,会根据URL来寻找相应的视图函数,随后由其生成页面发送回给客户端.其中,不同的URL对应着不同的视图函数,这就存在一个映射关系.而处理这个映射关系的功能就叫做路由.路由的实现分为 ...

  10. python每天一个小练习-强壮的密码

    强壮的密码 题目来源 checkio 需求 斯蒂芬和索菲亚对于一切都使用简单的密码,忘记了安全性.请你帮助尼古拉开发一个密码安全检查模块 如果密码的长度大于或等于10个符号,至少有一个数字,一个大写字 ...