运行结果：

<!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. 【翻译】光速React – Vixlet

    翻译原文链接:https://blog.vixlet.com/react-at-light-speed-78cd172a6411 个人翻译小站链接:http://www.zcfy.cc/article ...

  2. sql备份(.mdf文件备份)

    第一步: 右键需要备份的数据库(这里以MyDB为例),选择“属性”. 第二步: 选择“文件”,复制路径 第三步: 打开文件所在目录,复制MyDB.mdf和MyDB_log.ldf 第四步: 把数据库停 ...

  3. Visual Studio Code 使用心得

    Visual Studio Code 使用心得 最好用的跨平台编辑器,没有之一! 修改编辑器的显示语言 起因:vsCode又升级了(1.13.0),重启之后发现熟悉的中文菜单没有了,而且设置文件 se ...

  4. ACL2016信息抽取与知识图谱相关论文掠影

    实体关系推理与知识图谱补全 Unsupervised Person Slot Filling based on Graph Mining 作者:Dian Yu, Heng Ji 机构:Computer ...

  5. 从netty源码里拿到的关于http错误码，自己学习下

    public static HttpResponseStatus valueOf(int code) { switch (code) { case 100: return CONTINUE; case ...

  6. ASP.NET MVC开发学习过程中遇到的细节问题以及注意事项

    1.datagrid中JS函数传值问题: columns: { field: 'TypeName', title: '分类名称', width: 120, sortable: true, format ...

  7. iOS-swift-协议和拓展

    1 协议(protocol) 使用关键字 protocol 创建协议. protocol ExampleProtocol { var simpleDescription: String { get } ...

  8. 使用ABP打造SAAS系统（1）——环境准备

    一.前言 使用ABP也有一段时间了,很多东西是懂非懂,打算试着使用abp来搭建一套SAAS系统,与实际项目相互验证. 主要实现以下目标: 将ABP源码与实际项目相结合,后续可以修改相关源码来支持项目, ...

  9. CSS动画属性性能详细介绍

    CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...

  10. JavaScript练习笔记整理·2 - 6.24

      Codewars地址:https://www.codewars.com/ 欢迎和大家一起来讨论~   基础练习(1):   我的解答为: function isIsogram(str){ if(s ...