运行结果：

<!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. 开篇有益-解析微软微服务架构eShopOnContainers（一）

    为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台(几乎涵盖了所有平台,windows.mac.linux ...

  2. Building [Security] Dashboards w/R & Shiny + shinydashboard（转）

    Jay & I cover dashboards in Chapter 10 of Data-Driven Security (the book) but have barely mentio ...

  3. python 列表转字典

    def func_data(text): data = dict() for kv in text.split(','): k_v = kv.split(':') data[k_v[0]] = k_v ...

  4. 天气正好，hello world!

    两个多月,稀里糊涂的回来了,内心很迷茫,回来一周了,明知道还需要有一大堆东西需要去学,但是却找不到之前学习的状态,在寝室,在实验室,看着自己一向不喜欢的电视剧,无目的的逛着淘宝,刷着头条和知乎,就这么 ...

  5. Linux获取UUID

    Linux内核提供有UUID生成接口: cat /proc/sys/kernel/random/uuid Linux上一切皆文件,不管什么程序,读取文件就能获取一个UUID.

  6. .NET MVC页面生命周期及传统ASP.NET页面周期

    目前我主要使用.Net MVC框架进行网页创建,数据库是MSSQL Server.所以,我就用.NET MVC框架的web页面周期来说明页面的生命周期,但是我觉着其他MVC框架也是大同小异的. 本文主 ...

  7. Mybatis学习（一） - 快速入门

    MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架. MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装. MyBatis可以使用简单的XML或注解用 ...

  8. CentOS 7 for ARM 安装一键Lnmp失败

    背景 前面把树莓派装上了CentOS 7,趁着国庆放假回来赶紧把服务端环境搭起来,为了方便就准备用一键lnmp快速部署一个,结果死活安装不成功... 报错 按照以往的经验进行安装,在我的小树莓派上安装 ...

  9. Windows窗口的尺寸和位置

    介绍 窗口的大小和位置表示为一个矩形边界,该矩形的坐标是相对于屏幕或父窗口而言的.顶级窗口的坐标是相对于屏幕的左上角而言的,子窗口的坐标则是相对于父窗口的左上角而言.应用程序创建窗口时(CreateW ...

  10. java排序算法之冒泡排序

    冒泡排序的基本思想即将一串数字进行由小到大进行排序 例如1,9,7,2,4,3,6,10,20,5 实现思路: 第一个数分别与接下来的数字做对比 第一次  1<9不变,再1<7不变,1&l ...