运行结果:

<!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 的使用

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

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

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

  4. css中的定位属性position(转)

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

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

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

  6. 定位属性position

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

  7. CSS定位属性

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

  8. css定位、position与float同时使用的情况

    一.css定位 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 1.普通流:未专门指定的元素都在普通流中定位,position:static/relative;和float:none;也在普通 ...

  9. CSS中属性position位置详解功能讲解与实例分析

    position有五个值:static.relative.absolute.fixed.inherit. static 是默认值.就是按正常的布局流从上到下从左到右布局,平常我们做网页制作时,没有指定 ...

随机推荐

  1. 一个简单的Socket通信Demo

    服务器端Demo: Server.java(服务器端运行主程序,直接运行): package cn.wjs; import java.net.InetAddress; import java.net. ...

  2. FZU2176(二维线段树+dfs)

    传送门:easy problem 题意:给定一棵n个节点以1为根的树,初始每个节点的值为0,现在我们要在树上进行一些操作,操作有两种类型. 1 x val 表示对以x为根的子树的每个点进行加权操作(我 ...

  3. V4L2驱动的移植与应用(三)

    三.V4L2的demo capture.c是官方示例程序. capture.c 程序中的 process_image 函数: capture.c 程序主要是用来演示怎样使用 v4l2 接口,并没有对采 ...

  4. env-cmd 从文件读取配置变量

    npm install --registry=https://registry.npm.taobao.org -D env-cmd So.. 这样你在npm run build的时候会发现输出文件里面 ...

  5. Python基础(迭代器)

    一.迭代器 概述: 迭代是Python最强大的功能之一,是访问集合元素的一种方式. 迭代器是一个可以记住遍历的位置的对象. 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能 ...

  6. 【codeforces 983E】NN country

    Description In the NN country, there are n cities, numbered from 1 to n, and n−1 roads, connecting t ...

  7. arcgis 画图工具

    arcgis 4.x系列JavaScript API在4.4及以前的版本对画图工具(Draw)是不支持的,自4.5版本后才提供Draw的类.相关连接:https://developers.arcgis ...

  8. PHPUnit实践一(初识)

    PHPUnit实践一(初识)     本系列教程所有的PHPUnit测试基于PHPUnit6.5.9版本,Lumen 5.5框架 前置 日常我们的普通用到的测试: 代码直接echo,debug等方法测 ...

  9. Spring配置之context:annotation与、component-scan以及annotation-driven

    spring boot帮助我们隐藏了大量的细节,有些配置spring boot都是开启的,因此当我们查看遗留项目使用spring时候遇见问题一定细心排查 <!-- context:annotat ...

  10. Oracle Index Clustering Factor(集群因子)

    一.本文说明: 今天在做测试的时候发现字段上有索引,但是执行计划就是不走索引,经过在网上查找才发现原来是索引的集群因子过高导致的.本文属于转载 二.官网说明 The index clustering ...