运行结果：

<!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. 我来谈谈PHP和JAVA的区别

    这里的标题写的是谈谈PHP和JAVA的区别,其实是委婉的说法,其实别人是想听PHP好还是JAVA好!!! 从而从中找到存在感!!! 因为由于我是从多年的php开发转到java开发的.所以最,不时的有好 ...

  2. mongoose populate

    mongoose具备关系数据库一样的关联查询,通过在schema模型中设置ref属性,然后在查询时使用populate关键字,可以达到关联查询的目的. 以下内容参考了mongoose官方文档http: ...

  3. Spring与Mybatis整合

    一 概述 1.整合的目的 将Mapper映射器的创建任务交给Spring容器. 二 具体实现 1.创建sqlSessionFactory: <bean id="sqlSessionFa ...

  4. web前端面试集锦（自己搜集的，如有错误请不吝赐教）

    css 1 浏览器兼容性 CSS hack(针对IE6-,IE7,IE8,IE9以及其他浏览器) ‘ * ’ : 所有的IE浏览器都能识别 说明:在标准模式中 “-″减号是IE6专有的hack “\9 ...

  5. 织梦dedecms列表页dede:pagelist分页问题

    pagelist是dede定义的一个分页标签.有时直接引用这个标签的时候,会出现分页标签变形问题.我在使用非默认模板的时候就遇到过两次. pagelist本身就有一些样式是在include/arc.l ...

  6. Java常用类之要点总结

    Java常用类之要点总结

  7. Android高效内存1：一张图片占用多少内存

    在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用.而在App中,大部分内存可能被我们图片占用了,所以减少图片的内存占用可以带来直接的效果.本文就简单介绍一张图片到 ...

  8. 【easyui】Tab的tools按钮刷新当前tab

    点击刷新按钮,刷新当前Tab选项卡 /** * Name 选项卡初始化 */ $('#home-tabs').tabs({ tools: [{ iconCls: 'icon-reload', bord ...

  9. 数据库并行读取和写入(Python实现)

    这篇主要记录一下如何实现对数据库的并行运算来节省代码运行时间.语言是Python,其他语言思路一样. 前言 一共23w条数据,是之前通过自然语言分析处理过的数据,附一张截图: 要实现对news主体的读 ...

  10. Spring学习（8）--- @Autowired注解(一)

    可以将@Autowired注解为“传统”的setter方法 package com.mypackage; import org.springframework.beans.factory.annota ...